18

toDataUrl() を使用して画像タグのソースを設定すると、保存時の画像が元の画像よりもはるかに大きいことがわかりました。

以下の例では、toDataUrl 関数の 2 番目のパラメーターを指定していないため、デフォルトの品質が使用されています。これにより、元の画像サイズよりもはるかに大きな画像になります。フル品質の 1 を指定すると、生成されるイメージはさらに大きくなります。

なぜこれが起こっているのか、どうすればそれを止めることができるのか誰か知っていますか?

            // create image
            var image = document.createElement('img');

            // set src using remote image location
            image.src = 'test.jpg';

            // wait til it has loaded
            image.onload = function (){

            // set up variables
            var fWidth = image.width;
            var fHeight = image.height;

            // create canvas
            var canvas = document.createElement('canvas');
            canvas.id = 'canvas';
            canvas.width = fWidth;
            canvas.height = fHeight;
            var context = canvas.getContext('2d');

            // draw image to canvas
            context.drawImage(image, 0, 0, fWidth, fHeight, 0, 0, fWidth, fHeight);

            // get data url 
            dataUrl =  canvas.toDataURL('image/jpeg');

            // this image when saved is much larger than the image loaded in
            document.write('<img src="' + dataUrl + '" />');

            }

ありがとう:D

以下に例を示します。残念ながら、イメージをクロスドメインにすることはできないため、jsfiddle イメージの 1 つを取得する必要があります。

http://jsfiddle.net/ptSUd/

画像は 7.4kb ですが、出力中の画像を保存すると 10kb であることがわかります。より詳細な画像では、違いがより顕著になります。toDataUrl の品質を 1 に設定すると、画像は 17kb になります。

これには FireFox 10 も使用しています。Chrome を使用すると、画像サイズはまだ大きくなりますが、それほど大きくはありません。

4

3 に答える 3

13

メソッドによって返される文字列はtoDataURL()、元のデータを表していません。

いくつかの広範なテストを実行したところ、作成されたデータ URL が (オペレーティング システムではなく)ブラウザーに依存することが示されました。

 Environment             -    md5 sum                       - file size
    Original file        - c9eaf8f2aeb1b383ff2f1c68c0ae1085 - 4776 bytes
WinXP Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes
Linux Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes
Linux Firefox 10.0.2     - 4f184006e00a44f6f2dae7ba3982895e - 3909 bytes

データ URI を取得する方法は重要ではありません。次のスニペットを使用して、ファイル アップロードからのデータ URI も異なることを確認しました。

テストケース: http://jsfiddle.net/Fkykx/

<input type="file" id="file"><script>
document.getElementById('file').onchange=function() {
    var filereader = new FileReader();
    filereader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            var c = document.createElement('canvas'); // Create canvas
            c.width = img.width;
            c.height = img.height;  c.getContext('2d').drawImage(img,0,0,img.width,img.height);
            var toAppend = new Image;
            toAppend.title = 'Imported via upload, drawn in a canvas';
            toAppend.src = c.toDataURL('image/png');
            document.body.appendChild(toAppend);
        }
        img.src = event.target.result; // Set src from upload, original byte sequence
        img.title = 'Imported via file upload';
        document.body.appendChild(img);
    };
    filereader.readAsDataURL(this.files[0]);
}
</script>
于 2012-03-19T20:02:35.923 に答える
5

画像のサイズは、主にブラウザーに組み込まれているエンコーダーの品質によって決まります。元の画像のサイズとはほとんど関係ありません。ピクセルだけに何かを描画するcanvasと、元の画像はなくなります。 toDataURLにペイントされたイメージを魔法のように再構成することはありませんcanvas。元の画像と同じサイズのファイルが必要な場合: 元の画像を使用します。

于 2012-03-19T18:04:45.220 に答える
2

キリロイドのように見え、ロブはそれを釘付けにしました. 私もこの問題を抱えていましたが、それはコンボのようです:

  • dataURL は base64 エンコーディングを使用しているため、約 1.37 X 大きくなります
  • 各ブラウザは toDataURL 関数を異なる方法で処理します

base64 でエンコードされた画像サイズ

win8.1 firefox と chrome でサムネイル ジェネレーターをテストし、dataURL 文字列のサイズを取得しました。

  • ファイアフォックス = 3.72kB
  • クロム = 3.24kB

dataURL に変換したときの元の画像は 32kB から 45kB になりました。

base64の部分がより大きな要因だと思うので、サーバーに保存する前にdataURLをバイナリバイト配列に変換することを計画していると思います（サーバーが怠けているため、おそらくクライアント側で）。

于 2015-02-03T11:59:29.223 に答える