画布。toDataURL导致实体黑色图像?

I have a canvas element with some doodling in it.

我有一个画布元素，其中有一些涂鸦。

I am using the following to convert the canvas to a jpeg:

我正在使用以下方法将画布转换为jpeg格式:

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

However instead of my doodle, I get a solid black jpeg.

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

Can anyone tell me what I'm doing wrong?

有人能告诉我我做错了什么吗?

Thanks!

谢谢!

2 个解决方案

#1

Thats happening because the JPEG does not support a transparent background.. if you want that to be supported use png (the default extension) else you can set a non transparent fill color to the canvas using .fillStyle and .fillRect

这是因为JPEG不支持透明的背景。如果您希望支持使用png(默认扩展)，则可以使用.fillStyle和.fillRect将不透明的填充色设置为画布。

#2

Image created with a "image/jpeg" type have a default black background. Consider the snippet below in which the canvas is on the left and the captured image is on the right:

使用“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>

If you've only drawn black shapes on the canvas, you won't see them against a default black JPEG background.

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

If you instead use the type image/png, the background will be transparent by default.

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

#1