将ImageData对象（不是画布）转换为图像dataURL

Question

我想从ImageData对象创建一个dataURL（即宽度，高度，数据）。我意识到画布有这个，但我想避免画布使用的扭曲（主要是alpha预乘）..即我想避免明显的canvas.putImageData步骤。

从this post我可以将任何arraybuffer / typedarray / dataview转换为base64。我不知道的是canvas canvasurl如何将宽度/高度添加到base64字符串的Uint8数据部分。我也不知道如何完成png转换。 （我可以使用原始数据图像类型，但我不认为有一个..只是png和jpg）

可能的方法：

• 使用putImageData将ImageData加载到Canvas中。失败，扭曲数据。
• 使用img.src = base64数据创建图像。失败，必须是canvas dataurl。
• 其他？

任何人都知道如何从原始宽度，高度，数据Imagedata？

构建图像dataURL

Answer 1

从理论上讲可以将ImageData对象转换为data URL，而无需使用Canvas。

ImageData对象具有图像像素的原始RGBA表示形式。 data URL期望数据采用公认的MIME格式。根据{{​​3}}，唯一受广泛支持的基于像素的图像类型是GIF，JPEG，PNG和ICO。 GIF和JPEG非常复杂，所有这些格式都具有标头信息，而PNG具有CRC，因此将像素数据转换为图像格式并非易事。

推荐的转换方法是使用Canvas。您说您的尝试“扭曲了”数据，但这表明您的操作方式存在问题，因为这实际上是受支持的最佳方法，因为它建立在浏览器用来进行所有图像处理的内部结构上。

您是否检查了context设置？如果您使用的是alpha，则可能需要ctx.globalCompositeOperation = "copy"而不是默认的"source-over"。