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

Posted 2023-02-22

【中文标题】将 ImageData 对象（不是画布）转换为图像 dataURL

【英文标题】：Convert an ImageData object (not a canvas) to image dataURL

【发布时间】：2016-05-28 16:58:12

【问题描述】：

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

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

可能的方法：

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

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

【参考方案1】：

在不使用Canvas 的情况下，将ImageData 对象转换为data URL 理论上是可行的，但并不实际。

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

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

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

【讨论】：

谢谢。我需要做这个操作服务器端。我目前使用package canvas，但我想知道是否有更好的方法。

主要失真来自非 255 alpha 值的 alpha 预乘。其次，任何基于浏览器的方法都可以进行“颜色配置文件”调整。从那以后，我发现了一种相当简单的 webgl 方法，其中涉及使用帧缓冲区。我应该总结一下！

BMP 不是将 Uint8ClampedArray 数据转换成更直接的格式吗？所有主流浏览器都支持它。