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

Create HTML canvas from Ajax Arraybuffer response type

本文关键字：创建 HTML 画布 类型 响应 Ajax Arraybuffer      更新时间：2023-09-26

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

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

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

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

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

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

  1. 使用可以是image、Video、Canvas或上下文的图像源
  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
相关文章：