26

私のアプリの一部には、標準の2DコンテキストキャンバスとwebGLを組み合わせて使用​​するhtml5写真編集が含まれています。

とにかく、ユーザーが写真を操作している間、「元に戻す」状態を保存しています。これらはすべて、base64画像データとしてJavascriptオブジェクトに保存されます。

すべてが正常に機能し、パフォーマンスは良好です。

ただし、getImageDataからデータを保存すると、使用するメモリが少なくなるのか、パフォーマンスが向上するのでしょうか。

だから私の質問を要約すると：

toDataURL（）によって生成されたbase64 jpegとgetImageData（）の結果のどちらがメモリ内でより多くのスペースを必要としますか？また、2つの間にパフォーマンスの違いはありますか（キャンバスへのロードと、キャンバスからのデータのプルに関して）

前もって感謝します。

4

3 に答える 3

28

getImageData（）はtoDataURL（）よりも多くのメモリを消費します

  • ImageDataはピクセル配列であり、画像に関する最大の情報です。ピクセル配列の長さはwidthOfImage * heightOfImage * 4次のとおりです。たとえば、寸法が100の画像のimageDataの長さはvar imageDataArrayLenth = 100 * 100 * 4 = 40 000 (bytes);
  • BLOB（JPGまたはPNG）は、jpgまたはpngアルゴリズムで圧縮されたimageDataであり、imageDataよりも10倍または20倍小さいサイズにすることができます（画像の内容によって異なります）。
  • DataURL（BASE64）は、JPGまたはPNGに圧縮されてから文字列に変換されるimageDataであり、この文字列はBLOBより37％（ info ）大きくなります。

結論：より良い方法は、BLOB（info）を使用することです。

//Example of using blob with objectURL
var canvas = document.getElementById("canvas");

canvas.toBlob((blob) => {
  let img = new Image();
  img.onload = () =>  URL.revokeObjectURL(img.src);  // no longer need to read the blob so it's revoked
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
});
于 2016-01-21T13:07:19.813 に答える
12

良い質問！オブジェクト自体の実際のサイズについてはわかりません。JSの実装間で異なるはずですが、それは、知識に基づいた推測ができないという意味ではありません。

まず、この質問の近似関数を使用できます：JavaScriptオブジェクトのサイズ

そして例を挙げてください：http：//jsfiddle.net/g39uz/

ImageDataの720056バイトと比較して、文字列はおそらく80116バイトです。またはそのあたり。

ここには桁違いの違いがあり、画像が単純な場合、その違いはさらに顕著になります。Base64表現は圧縮できることを覚えておく価値があります（そしてそれはそうです）。空白のキャンバスを使用して、少しの間それを限界まで見てみましょう。

http://jsfiddle.net/g39uz/2/

空白のキャンバスでは、dataURL文字列はわずか1996バイト（またはその前後）ですが、画像データは、もちろん、骨の折れる配列の詳細ですべてのピクセルを忠実に記述していますが、それでも720056です。

つまり、保存している場合、base64文字列が占めるスペースはおそらく少なくなります。桁違いに。

于 2012-08-10T14:45:40.710 に答える
1

先日、これを実行しました... getImageDataメソッドは、実際のデータがuint8arrayに格納されている画像オブジェクトを返します...データベースが管理できるものにデータを変換する必要がありますが、それだけの価値はありません。最終的な出力は、toDataURLメソッドよりもはるかに大きくなります

また、toDataURLbase64文字列をキャンバスに戻すのも非常に簡単です...新しい画像をインスタンス化してsrcにbase64文字列を指定するだけです

于 2012-08-10T14:50:19.533 に答える