首页 文章

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

提问于
浏览 次
2

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

从this post我可以将任何arraybuffer / typedarray / dataview转换为base64 . 我不知道的是canvas canvasurl如何将宽度/高度添加到base64字符串的Uint8数据部分 . 我也不知道如何完成png转换 . （我认为有一个......只是png和jpg）

可能的方法：

  • 使用putImageData将ImageData加载到Canvas中 . 失败，扭曲数据 .

  • 使用img.src = base64数据创建图像 . 失败，必须是canvas canvasurl .

  • 其他？

任何人都知道如何从原始宽度，高度，数据Imagedata构建图像dataURL？

javascript html5-canvas base64 data-uri

1 回答

  • 1

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

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

    建议的转换方法是使用 Canvas . 你说你的尝试是数据，但这表明你如何做到这一点有一些问题，因为这确实是最好的支持方法，因为它 Build 在内部浏览器用来做他们所有的图像处理 .

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

    回复于

相关问题