从 Ajax Arraybuffer 响应类型创建 HTML 画布答案

【问题标题】：Create HTML canvas from Ajax Arraybuffer response type从 Ajax Arraybuffer 响应类型创建 HTML 画布
【发布时间】：2015-05-03 20:38:45
【问题描述】：

我正在对服务器进行 Ajax 调用以获取 Jpeg 文件。我将数据作为数组缓冲区返回。现在如何在画布上渲染这个 Array 缓冲区。现在请不要建议任何答案，例如将源网址设置为图像。我想将图像数据保存在内存中进行一些处理。

【问题讨论】：

标签： javascript ajax canvas arraybuffer putimagedata

【解决方案1】：

如果您不想将缓冲区用作图像源，那么剩下的唯一选择就是自己解析原始缓冲区。请记住，此缓冲区包含 未处理（原始）文件，因此解析它意味着低级字节解析（使用 DataView）。

这是可行的，但您需要处理解析 JPEG 文件的所有方面，例如标题、格式区域、解压缩和解码任何类型的图像缓冲区（RGB、CMYK、YUV 等）、验证和错误处理。

但是，这可能不切实际，除非您打算使用 JPEG 文件的特殊方面，例如检索原始 CMYK 数据。

因此，如果您想避免使用 JavaScript 解析器，唯一实用的方法是将 ArrayBuffer 转换为 Base-64（通过 Uint8Array 等视图），在其前面加上 data-uri 标头，然后设置它作为 Image 对象的 src。更好的是，直接将网址设置为图片源，让浏览器解析解码即可。

基本上只有两种方法可以将图像数据放入画布：

使用可以是图像、视频、画布或上下文的图像源。
使用 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

【讨论】：

感谢您的回复。好的，假设我有 Jpeg 数据作为 BLOB .. 那么如何在画布上绘制呢？
@Raj 您需要为 Blob 创建一个 ObjectURL 并将其设置为图像对象的源。但这是不必要的开销，直接将原始 URL 设置为图像源即可。只有两种方法可以绘制到画布，一种是使用图像源（图像、视频、画布、上下文）或使用像素缓冲区。问题是您的原始数组缓冲区包含未处理的原始文件，因此您不能在没有应用程序解析它的情况下直接使用它，或者只让浏览器解析它。
是的，我明白了，现在我正在创建一个图像对象并设置它的 URL，最后加载图像我只是在画布上绘制图像。所有的解码都由浏览器处理。谢谢回复。这是我的代码... var img = new Image(); img.onload = function () { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); }; img.src = 网址;