Javascript canvas.toDataURL是否会产生纯黑色图像？

我有一个画布元素，里面有一些涂鸦

我使用以下方法将画布转换为jpeg：

var data = canvas.toDataURL( "image/jpeg", 0.5 );
var img = new Image();
img.src = data;
$( "body" ).append( img );

然而，我得到的不是我的涂鸦，而是一个纯黑色jpeg

谁能告诉我我做错了什么

---

谢谢

这是因为JPEG不支持透明背景。。如果希望支持此功能，请使用png（默认扩展名），否则可以使用。

fillStyle

和。

fillRect

使用

“Image/jpeg”

类型创建的图像具有默认的黑色背景。考虑下面的画布，其中画布在左边，捕获的图像在右边：

var canvas=$（“#c”）.get（0），ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“rgb（200,0,0）”；
ctx.fillRect（40,60,20,20）；
var data=canvas.toDataURL（“图像/jpeg”）；
var img=新图像（）；
img.src=数据；
$（“正文”）。附加（img）；
var data=canvas.toDataURL（“image/png”）；
var img=新图像（）；
img.src=数据；
$（“正文”）。附加（img）
canvas{border:thin solid green；}
img{边框：纯黑色；右边距：5px；}
正文{背景色：#DFF；}

Hey apsillers的可能重复感谢您提供了如何将默认背景从黑色更改为透明的答案，因为我在这方面遇到了一些问题。很有趣，我没有看到这个问题，直到我尝试在一个单独的浏览器窗口加载图像-这显然是一个黑色的背景，这意味着图像只显示为黑色时，它不是网页的一部分！