canvas.toDataURL 导致纯黑色图像？答案

【问题标题】：canvas.toDataURL results in solid black image?canvas.toDataURL 导致纯黑色图像？
【发布时间】：2014-11-05 02:47:40
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

How to convert a image from PNG to JPEG using javascript?的可能重复

标签： javascript jquery canvas html5-canvas

【解决方案1】：

发生这种情况是因为 JPEG 不支持透明背景。如果您希望支持它，请使用 png（默认扩展名），否则您可以使用 .fillStyle 和 .@ 为画布设置非透明填充颜色987654322@

【讨论】：

【解决方案2】：

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

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 感谢您提供有关如何将默认背景从黑色更改为透明的答案，因为我已经有一段时间遇到这个问题了。
很有趣，直到我尝试在单独的浏览器窗口中加载图像之前我才看到这个问题 - 这显然具有黑色背景，这意味着图像仅在它不属于时才显示为黑色一个网页！