2

私が現在作成しているwebapppでは、ユーザーはサーバー側でデータベースに保存される画像を提供する必要があります。サーバーの負荷を最小限に抑えるために、HTML5 Canvas を使用してクライアント側で画像のサイズ変更を処理し、サイズ変更された画像の品質をユーザーに事前に承認してもらいます。

私が遭遇した問題はこれです - サイズ変更された画像のファイルサイズが大きいです。Paint.NET で同じ画像のサイズを変更すると、完全にまともな軽量の 8 ビット PNG 画像を取得できます。32 ビットの Paint.NET イメージでさえ、toDataURL を介してサーバーに表示されるイメージよりも小さいです。toDataURL 品質パラメータをいじってみましたが、変更しても何の効果もありません - まったく同じデータサイズです。

私は Chrome 20.0.1132.57 m でテストしており、アプリに関連する唯一のブラウザーは Chrome と Safari のデスクトップ バージョンであることを言及しておく必要があります。

サーバー側の画像処理を行うことができることは知っていますが、可能であればそれを避けたいです。質問 - ブラウザから送信される画像ファイルのサイズを小さくするために何かできることがあるとしたら、どうすればよいですか?

4

1 に答える 1

2

ブラウザは、toDataUrlなどに指定された品質パラメータを無視してもかまいません。私はそれを尊重することが仕様によって義務付けられているとは思わない。

品質を正確に管理する唯一の方法は

  • JSで独自のPNGコンプレッサーを作成するか、インターネットから盗むことができるものを使用してくださいhttps://github.com/imaya/CanvasTool.PngEncoder

  • <canvas>データをArrayBufferにダンプします

  • これをWebWorkerに渡します

  • PNGコンプレッサーライブラリを使用してWebWorkerに圧縮させます

JPEG/PNGのエンコードとデコードのソリューションはすでに存在すると思います。

別の方法として、canvas.mozGetAsFile（）/ canvas.toBlob（）を試すこともできますが、ブラウザーは依然として品質パラメーターを尊重しないと思います。

https://developer.mozilla.org/en/DOM/HTMLCanvasElement/

于 2012-07-24T11:33:03.957 に答える