愿所有的美好和期待都能如约而至

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

发布时间:  来源:互联网  作者:匿名  标签:base64 data-uri error Convert an ImageData object (not a canvas) to image dataUR  热度:37.5℃

本文介绍了将ImageData对象(不是画布)转换为图像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吗?

推荐答案

不使用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"

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

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP