9
ブラウザでJavascriptを介して画像を圧縮する方法は？
TL; DR; アップロードする前に、画像（主にjpeg、png、gif）をブラウザ側で直接圧縮する方法はありますか？JavaScriptでこれができると確信していますが、それを実現する方法が見つかりません。 これが私が実装したい完全なシナリオです： ユーザーが私のウェブサイトにアクセスし、input type="file"要素を介して画像を選択し、 この画像はJavaScriptを介して取得されます。正しいファイル形式、最大ファイルサイズなど、いくつかの検証を行います。 すべて問題がなければ、画像のプレビューがページに表示されます。 ユーザーは、画像を90°/ -90°回転したり、事前定義された比率に従ってトリミングしたりするなどの基本的な操作を実行できます。または、ユーザーは別の画像をアップロードして手順1に戻ることができます。 ユーザーが満足すると、編集された画像は圧縮され、ローカルに「保存」されます（ファイルには保存されませんが、ブラウザのメモリ/ページに保存されます）。 ユーザーは、名前、年齢などのデータをフォームに入力します。 ユーザーが[完了]ボタンをクリックすると、データと圧縮画像を含むフォームがサーバーに送信されます（AJAXなし）。 最後のステップまでの全プロセスはクライアント側で実行する必要があり、最新のChromeとFirefox、Safari5以降およびIE8以降と互換性がある必要があります。可能であれば、JavaScriptのみを使用する必要があります（ただし、これは不可能であると確信しています）。 今は何もコーディングしていませんが、すでに考えています。ファイルAPIを介してローカルでファイルを読み取ることができます。画像のプレビューと編集はCanvas要素を使用して行うことができますが、画像圧縮部分を行う方法が見つかりません。 html5please.comとcaniuse.comによると、これらのブラウザのサポートは非常に困難です（IEのおかげで）が、FlashCanvasやFileReaderなどのポリフィルを使用して行うことができます。 実際、目標はファイルサイズを小さくすることなので、解決策として画像圧縮を考えています。しかし、アップロードされた画像が毎回同じ場所で私のWebサイトに表示されることはわかっており、この表示領域のサイズ（200x400など）も知っています。そのため、これらのサイズに合わせて画像のサイズを変更し、ファイルサイズを小さくすることができました。この手法の圧縮率はどうなるかわかりません。 どう思いますか ？何かアドバイスはありますか？JavaScriptでブラウザ側の画像を圧縮する方法を知っていますか？返信ありがとうございます。