从 Ajax Arraybuffer 响应类型创建 HTML canvas

Question

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

Answer 1

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

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

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

所以，如果你想避免使用 JavaScript 解析器，唯一实用的方法是将你的 ArrayBuffer 转换为 Base-64（通过 Uint8Array 等视图），在它前面加上 data-uri header，然后将其设置为图像的 src object。更好的是，直接将 URL 设置为图像源，让浏览器解析和解码文件。

基本上只有两种方法可以将图像数据导入canvas:

使用可以是图像、视频、Canvas 或上下文的图像源。
使用 ImageData 写入原始像素数据 objects.

对于后者，您需要从某个地方获取位图，通常是另一个或同一个 canvas，或者从原始未压缩位图数据形式的外部源，或者您传递给浏览器的文件处理，或者您使用前面提到的 low-level 方法进行处理（这两种情况都需要满足 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

从 Ajax Arraybuffer 响应类型创建 HTML canvas

Create HTML canvas from Ajax Arraybuffer response type

javascript

ajax

canvas

arraybuffer

putimagedata