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和。用"image/jpeg"類型創建fillRect

Answer 2

圖片具有默認黑色的背景。考慮下面的代碼片段中，畫布是在左邊，爲拍攝圖像是在右邊：

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，背景將默認爲透明。