从画布创建的图像具有黑色背景(HTML5)

2022-05-23 前端后端 IT知识 html5 网站开发

使用toDataURL()方法从画布元素导出的图像是否为黑色背景？真的很烦人的问题不是吗？
HTMLCanvasElement.toDataURL()方法以type参数指定的格式返回数据URI, 该数据URI包含图像的表示形式(默认为PNG)。
图片的黑色背景是由错误的导出格式引起的, 如果你遇到此问题, 则可能是通过以下方式导出图片的：

var Image = canvas.toDataURL("image/jpeg");

通常, 你将省略第一个参数(格式), 因为它将始终为PNG, 但是如果你明确指定格式并且图像具有透明度, 则将面临此问题。
要解决此错误, 请将第一个参数从image / jpeg更改(或省略)为image / png。

var Image = canvas.toDataURL("image/png"); // Or without parameter because the default exporting format is PNGvar Image = canvas.toDataURL();

为什么需要将图像导出为PNG格式？【从画布创建的图像具有黑色背景(HTML5)】仅仅因为如果你的画布具有透明背景, 并且导出的格式是JPG, 就不可能生成JPG格式的透明性, 因为仅PNG格式支持透明性。

推荐阅读

上一篇：每个开发人员都应了解的10条Twig技巧和基本功能

下一篇：如何在DOM元素上保存信息，数据属性介绍HTML5