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

Question

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

从这篇文章中，我可以将任何 arraybuffer/typedarray/dataview 转换为 base64。我不知道画布 dataurl 如何将宽度/高度添加到 base64 字符串的 Uint8 数据部分。我也不知道 png 转换是如何完成的。（我可以接受原始数据图像类型，但我认为没有一个..只有 png 和 jpg）

可能的方法：

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

有人知道如何从原始宽度、高度、数据 Imagedata 构造图像 dataURL 吗？

Answer 1

在不使用 a 的情况下将ImageData对象转换为 a理论上是可能的，但不实际。data URLCanvas

对象ImageData具有图像像素的原始 RGBA 表示形式。Adata URL期望数据采用可识别的MIME格式。根据MDN 的说法，唯一广泛支持的基于像素的图像类型是 GIF、JPEG、PNG 和 ICO。GIF 和 JPEG 相当复杂，所有这些格式都有标头信息，而 PNG 有 CRC，因此将像素数据转换为图像格式并不简单。

推荐的转换方法是使用Canvas. 您说您的尝试“扭曲”了数据，但这表明您的做法有问题，因为这确实是最好的受支持方法，因为它建立在浏览器用于执行所有图像操作的内部结构之上。

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