0

URL からキャンバスに画像を読み込んでから、dataUrl を取得し、これを使用して画像のサイズを調べようとしています。

その結果、画像が本来よりもはるかに大きく表示されます。

たとえば、60kb のイメージをロードすると、デコードされた変数は 134kb を返します。

私のPCにローカルに保存された画像で同じコードを実行すると、代わりにファイル入力からファイルオブジェクトを取得し、返される値は正しいです(たとえば 60kb )。

これは私が使用しているコードです:

            var canvas = document.getElementById('canvas');  
            var ctx = canvas.getContext('2d');  
            var img = '/anImage.jpg';
            var image = document.createElement('img'); 

            image.src = img;

            ctx.drawImage(image, 500, 500);  

            ctx.drawImage(image, img.width, img.height);

            var dataUrl =  canvas.toDataURL('image/jpeg');

            var d = dataUrl.substr(dataUrl.indexOf('base64,') + 7);
            var decoded = atob(d);

            var size = decoded.length;

dataUrl を使用して画像を再度出力して保存しようとしましたが、それでも画像は元のサイズの 60Kb ではなく 134kb になります。

base64エンコーディングは画像を1.37倍ほど大きくすることを理解していますが、ファイル入力から画像オブジェクトを取得するときの値は正しいです。

圧縮レベルが失われているかどうかわかりませんか? または、どうにかしてファイル オブジェクトからこれを取得し、それを使用して toDataUrl() 関数の 2 番目のパラメーターを設定できますか?

これに特に関連する情報をオンラインで見つけることができないため、情報をいただければ幸いです:)

4

1 に答える 1

0

HEAD画像のサイズをバイト単位で取得するには、画像がホストされている画像に対して簡単なリクエストを行うことができます。

例えば：

var xhr = new XMLHttpRequest();
xhr.open( 'HEAD', '/anImage.jpg', true );
xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 ) {
        if ( xhr.status == 200 ) {
            console.log( 'size: ' + xhr.getResponseHeader( 'Content-Length' ) );
        }
    }
};
xhr.send(null);
于 2012-03-15T11:56:03.503 に答える