将ImageData对象(不是画布)转换为图像dataURL [英] Convert an ImageData object (not a canvas) to image dataURL

问题描述

我想从ImageData对象(即宽度、高度、数据)创建一个dataURL。我意识到画布有这个，但我想避免画布使用有扭曲(主要是阿尔法预乘)..即，我希望避免明显的canvar.putImageData步骤。

从this post我可以将任何arrayBuffer/typedarray/dataview转换为Base64。我不知道知道的是Canvas Dataaurl如何将宽度/高度添加到Base64字符串的Uint8数据部分。我也不知道巴新是如何转换的。(我可以接受原始数据图像类型，但我不认为有这样的类型。仅限png和jpg)

可能的方法：

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

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

推荐答案

不使用Canvas将ImageData对象转换为data URL在理论上是可能的，但不实用。

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

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

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

这篇关于将ImageData对象(不是画布)转换为图像dataURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！