1

Jpeg ファイルのサーバーへの Ajax 呼び出しを行っています。配列バッファとして返されたデータがあります。この配列バッファをキャンバスにレンダリングするにはどうすればよいですか。ソースURLを画像に設定するなどの回答を提案しないでください。何らかの処理のために画像データをメモリに保持したい。

4

1 に答える 1

2

バッファを画像ソースとして使用したくない場合、残っている唯一のオプションは生のバッファを自分で解析することです。このバッファには未処理の（生の）ファイルが含まれていることに注意してください。したがって、それを解析するということは、低レベルのバイト解析（を使用DataView）を意味します。

実行可能ですが、ヘッダー、フォーマット領域、あらゆる種類の画像バッファー (RGB、CMYK、YUV など) の解凍とデコード、検証、エラー処理など、JPEG ファイルの解析のすべての側面を処理する必要があります。

ただし、生の CMYK データなどを取得するなど、JPEG ファイルの特別な側面を使用するつもりでない限り、これは実用的ではありません。

したがって、JavaScript パーサーの使用を避けたい場合の唯一の実用的な方法は、ArrayBuffer を Base-64 に変換し (Uint8Array などのビューを使用)、先頭に data-uri ヘッダーを追加してから、src として設定することです。 Image オブジェクトの場合。さらに良いのは、URL を画像ソースとして直接設定し、ブラウザでファイルを解析してデコードできるようにすることです。

イメージ データをキャンバスに取得する方法は基本的に 2 つしかありません。

  1. 画像、ビデオ、キャンバス、またはコンテキストの画像ソースを使用します。
  2. ImageData オブジェクトを使用して生のピクセル データを書き込みます。

後者の場合、ビットマップをどこか (通常は別のキャンバスまたは同じキャンバス) から取得するか、生の非圧縮ビットマップ データの形式で外部ソースから取得するか、ブラウザーに渡して処理するファイルを取得するか、または低レベルを使用して処理する必要があります。前述のレベルのアプローチ (どちらの場合も、CORS 要件を満たす必要があります)。

申し訳ありませんが、他の方法はありません..

JPEG 画像をキャンバスに描画してから、画像データ (ピクセル)を抽出することもできます。

context.drawImage(image, x, y);                             // image to canvas
var imageData = context.getImageData(x, y, width, height);  // get ImageData object
var uint8clampedarray = imageData.data;                     // get the 8-bit view
var arraybuffer = uint8clampedarray.buffer;                 // the raw byte buffer
于 2015-03-03T09:13:48.873 に答える