将一个ImageData对象（而不是画布）转换为图像数据URL

Question

我想从ImageData对象（即宽度、高度、数据）创建一个dataURL。我知道canvas可以做到这一点，但我想避免canvas使用时的失真（主要是alpha预乘）。也就是说，我想避免明显的canvas.putImageData步骤。

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

可能的方法：

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

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

- backspaces

Answer 1

理论上可以将ImageData对象转换为data URL，但不实用。 ImageData对象具有图像像素的原始RGBA表示。 data URL期望数据以公认的MIME格式存在。根据MDN的说法，唯一广泛支持的基于像素的图像类型是GIF、JPEG、PNG和ICO。 GIF和JPEG非常复杂，所有这些格式都有头信息，而PNG有一个CRC，因此将像素数据转换为图像格式并非易事。

推荐的方法是使用Canvas进行转换。你提到你的尝试使数据“扭曲”，但这表明你的操作有问题，因为这真的是最好支持的方法，它建立在浏览器用来进行所有图像操作的内部基础之上。

你检查了context设置吗？如果使用alpha通道，则可能希望使用默认值"source-over"而不是ctx.globalCompositeOperation = "copy"。

- Old Pro

---

谢谢。我需要在服务器端执行此操作。我目前使用canvas包，但我想知道是否有更好的方法。 - Paleo

主要的失真来自于非255 alpha值的alpha预乘。其次，任何基于浏览器的方法都可以进行“颜色配置文件”调整。我后来发现了一种相当简单的WebGL方法，涉及使用帧缓冲区。我应该把它做成一个要点！ - backspaces

BMP不是将Uint8ClampedArray数据转换为更直接的格式吗？它被所有主要浏览器支持。 - Magnus Lind Oxlund