将ImageData对象(不是画布)转换为图像dataURL

2022-07-25 00:00:00 base64 data-uri javascript html5-canvas

我想从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吗?


解决方案

不使用CanvasImageData对象转换为data URL在理论上是可能的,但不实用。

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

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

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

相关文章