canvas.toDataURL会产生纯黑色图像吗？

我有一个canvas元素，里面有一些涂鸦。

我使用以下内容将canvas转换为jpeg：

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

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

谁能告诉我我做错了什么？

谢谢！

Answer 1

这是因为JPEG不支持透明背景..如果你想要支持使用png（默认扩展名），否则你可以使用设置非透明填充颜色到canvas。 fillStyle和。 fillRect

Answer 2

使用"image/jpeg"类型创建的"image/jpeg"具有默认的黑色背景。 考虑下面的canvas，其中canvas在左侧，捕获的图像在右侧：

 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("image/jpeg"); var img = new Image(); img.src = data; $( "body" ).append( img ); var data = canvas.toDataURL("image/png"); var img = new Image(); img.src = data; $( "body" ).append( img ); 

 canvas { border: thin solid green; } img { border: thin solid black; margin-right: 5px; } body { background-color: #DFF; }