javascript - 从 Ajax Arraybuffer 响应类型创建 HTML Canvas

Question

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

Answer 1

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

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

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

因此，如果您想避免使用 JavaScript 解析器，唯一实用的方法是将您的 ArrayBuffer 转换为 Base-64(通过 Uint8Array 等 View )，在其前面加上 data-uri header ，然后设置它作为 Image 对象的 src。更好的是，直接将 URL 设置为图像源，让浏览器解析和解码文件。

基本上只有两种方法可以将图像数据放入 Canvas 中:

1. 使用图像源，可以是图像、视频、 Canvas 或上下文。
2. 使用 ImageData 对象写入原始像素数据。

对于后者，您需要从某个地方获取位图，通常是另一个或同一个 Canvas ，或者以原始未压缩位图数据的形式从外部源获取位图，或者您传递给浏览器进行处理的文件，或者您处理使用前面提到的低级方法(这两种情况都需要满足 CORS 要求)。

抱歉，没有其他办法..

您仍然可以将 JPEG 图像绘制到 Canvas 上，然后提取图像数据(像素):

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