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"类型创建的图片具有默认的黑色背景。考虑下面的画布，其中画布在左侧，捕获的图像在右侧：

＆＃13;

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 );

＆＃13;

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

＆＃13;

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

＆＃13;

如果您只在画布上绘制黑色形状，则无法在默认的黑色JPEG背景下看到它们。

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

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

2 个答案: