canvas.toDataURL导致图像全黑怎么办？

Question

我有一个带有一些涂鸦的画布元素。

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

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

但是我得到的不是我所画的涂鸦，而是一个纯黑色的jpeg图片。

有人可以告诉我哪里出了问题吗？

谢谢！

- user1031947

---

可能是重复的问题：如何使用JavaScript将图像从PNG转换为JPEG？ - Bohdan Lyzanets

Answer 1

这是因为JPEG格式不支持透明的背景，如果想要支持透明度，应该使用PNG格式（默认扩展名）。或者您可以使用fillStyle和fillRect来设置一个非透明的填充颜色。

- shakirthow

Answer 2

创建类型为"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类型，背景默认将是透明的。

- apsillers

---

嘿，apsillers，感谢您提供如何将默认背景从黑色更改为透明的答案，因为我一直遇到这个问题。 - AaronG

有趣的是，直到我尝试在单独的浏览器窗口中加载图像时，我才发现了这个问题 - 显然，该浏览器窗口具有黑色背景，这意味着当图像不是网页的一部分时，它只会显示为黑色！ - Michael