1

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

4

1 回答 1

2

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

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

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

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

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

  1. 使用可以是图像、视频、画布或上下文的图像源。
  2. 使用 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
于 2015-03-03T09:13:48.873 回答