canvas.toDataURL 导致纯黑色图像？

Question

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

我正在使用以下内容将画布转换为 jpeg：

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

但是，我得到的是纯黑色 jpeg，而不是我的涂鸦。

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

谢谢！

Answer 1

发生这种情况是因为 JPEG 不支持透明背景..如果您希望支持使用 png（默认扩展名），否则您可以使用 . fillStyle和。 fillRect

Answer 2

使用"image/jpeg"类型创建的"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("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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="c" width="100"></canvas>

如果您只在画布上绘制了黑色形状，您将不会在默认的黑色 JPEG 背景下看到它们。

如果您改为使用类型image/png ，默认情况下背景将是透明的。