[解決済み] ブラウザのJavascriptで画像を圧縮する方法を教えてください。

質問

TL;DRです。

画像（主にjpeg、png、gif）をアップロードする前に、ブラウザ側で直接圧縮する方法はありますか？私は JavaScript がこれを行うことができると確信していますが、私はそれを達成する方法を見つけることができません。

以下は、私が実装したい完全なシナリオです。

• ユーザーは私のウェブサイトに行き、画像を input type="file" 要素で画像を選択します。
• この画像はJavaScriptで取得され、正しいファイル形式、最大ファイルサイズなどいくつかの検証を行います。
• 全てに問題がなければ、画像のプレビューがページに表示されます。
• ユーザーは、画像を 90°/90° 回転させたり、あらかじめ定義された比率で切り取ったりといった基本的な操作を行うことができ、別の画像をアップロードしてステップ 1 に戻ることもできます。
• ユーザーが満足したら、編集した画像を圧縮してローカルに保存します (ファイルではなく、ブラウザのメモリ/ページに保存されます)。
• ユーザーは、名前、年齢などのデータをフォームに入力します。
• ユーザーがquot;Finish"ボタンをクリックすると、データ＋圧縮画像を含むフォームがサーバーに送信されます（AJAXなし）。

最後のステップまでの全プロセスはクライアント側で行われ、最新の Chrome と Firefox、Safari 5 以上、および、Safari 6 以上で互換性がある必要があります。 IE 8+ . 可能であれば、JavaScriptのみを使用すること（しかし、これは不可能であることは間違いない）。

今すぐには何もコーディングしていませんが、すでに考えてみました。ローカルでのファイル読み込みは ファイルAPI で、画像のプレビューや編集は キャンバス 要素で可能ですが 画像圧縮部分の方法が見つからない .

によると html5please.com と caniuse.com のように、これらのブラウザをサポートすることは（IEのおかげで）非常に困難ですが、次のようなポリフィルを使用することで実現可能です。 FlashCanvas と ファイル リーダー .

実は、ファイルサイズを小さくすることが目的なので、画像圧縮が解決策だと考えています。しかし、アップロードされた画像は、私のウェブサイトで、毎回同じ場所に表示されることを知っていますし、この表示領域の寸法 (たとえば、200x400) も知っています。そこで、その寸法に合うように画像をリサイズして、ファイルサイズを小さくすることができるのです。このテクニックの圧縮率がどの程度になるのか見当もつきません。

どう思いますか？何かアドバイスがありますか? JavaScriptでブラウザ側で画像を圧縮する方法を知っていますか？ご回答ありがとうございます。

どのように解決するには？

簡単に言うと

• .readAsArrayBufferでHTML5 FileReader APIを使用してファイルを読み込む。
• ファイル データを含む Blob を作成し、その URL を window.URL.createObjectURL(blob)でURLを取得します。
• 新しいImage要素を作成し、そのsrcをファイルblobのurlに設定します。
• 画像をキャンバスに送信します。キャンバスのサイズは希望の出力サイズに設定する
• canvas.toDataURL("image/jpeg",0.7)で縮小したデータを取得する（出力形式や画質は任意に設定できる）
• 元のフォームに新しい隠し入力をアタッチし、dataURI 画像は基本的に通常のテキストとして転送します。
• バックエンドで、dataURIを読み、Base64からデコードし、保存する。

ソースは コード .