Question

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

Answer 1

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

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

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

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

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

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

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

1 个答案: