从画布创建的图像具有黑色背景(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 PNG
var Image = canvas.toDataURL();

为什么需要将图像导出为PNG格式？

仅仅因为如果你的画布具有透明背景, 并且导出的格式是JPG, 就不可能生成JPG格式的透明性, 因为仅PNG格式支持透明性。