二进制数组到画布答案

【问题标题】：Binary array to canvas二进制数组到画布
【发布时间】：2013-09-29 08:34:36
【问题描述】：

我想将 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 图像在一个数组中，因此其他方法不起作用。

任何帮助将不胜感激

【问题讨论】：

就是这样。除了将字节数组转换为base64编码的数据URL并将其用作src到图像之外，别无他法，然后将图像绘制到画布上
这种方式“太错误了”，不能成为“原来的样子”。我敢肯定还有另一种方法。
我认为创建数据 URL 或对象 URL 没有太大区别。无论哪种方式，您都需要创建图像并将图像绘制到画布上。您不能“按原样”使用字节数组。 createObjectURL 在 MDN 上被标记为“实验性技术”

标签： javascript html image canvas html5-canvas

【解决方案1】：

假设您有办法将二进制数组拆分为每个图像的数组（通过已知长度或使用 JPEG 标头来识别新图像），您可以使用 Blob 和对象 URL：

示例（基于this example from MDN）：

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

现在您可以将图像的url 设置为src::

var img = new Image();
img.onload = function() {
    /// draw image to canvas
    context.drawImage(this, x, y);
}
img.src = url;

【讨论】：

ReferenceError: GetTheTypedArraySomehow is not defined 你在哪里定义的函数？
@guradio 这是一个虚构的函数，您可以从中获取自己的图像数据。