3

jpeg 画像をバイナリ配列からキャンバスにロードしたいと思います (現在 Uint8Array を試しています)。私は解決策をネット全体で探していましたが、配列をbase64に変換してから画像をロードするだけで、あまり効率的ではありませんでした。

画像をロードするために使用される私のコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="MainImage" width="756" height="600">Your browser doesn't support html5</canvas>
<script type="text/javascript">
_Request = new XMLHttpRequest();
var url = "http://localhost/AAA/S.jpg";
try {
   _Request.onreadystatechange = function() {
      if (_Request.readyState == 4 && _Request.status == 200) {
         var downloadedBuffer = _Request.response;
         if (downloadedBuffer) {
            var binaryByteArr = new Uint8Array(downloadedBuffer);
         }
      }
      _Request.open('GET', url, true);
      _Request.responseType = 'arraybuffer';
      _Request.send();
} catch (e) {
}
</script>
</body>
</html>

この処理された画像の配列をキャンバスにロードしたいと思います。

これは単なるサンプルです。元のコードは、単一の配列に複数の jpeg 画像を含むバイナリ配列を受け取るため、他の方法は機能しません。

どんな助けでもいただければ幸いです

4

1 に答える 1

4

バイナリ配列を画像ごとの配列に分割する方法があると仮定すると (既知の長さによって、または新しい画像を識別するために JPEG ヘッダーを使用して) Blob、オブジェクト URLを使用できます。

例 ( MDN のこの例に基づく):

var imageData = GetTheTypedArraySomehow();
var blob = new Blob([imageData], {type: "image/jpeg"});
var url = URL.createObjectURL(blob);

urlこれで、画像のasを設定できますsrc::

var img = new Image();
img.onload = function() {
    /// draw image to canvas
    context.drawImage(this, x, y);
}
img.src = url;
于 2013-09-24T08:42:51.163 に答える