canvas.toDataURL produce un'immagine nera piena?

Question

Ho un elemento di tela con alcuni scarabocchi.

Sto usando il seguente per convertire la tela per un jpeg:

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

Tuttavia invece del mio scarabocchio, ho un solido jpeg nero.

Qualcuno può dirmi cosa sto facendo male?

Grazie!

Answer 1

Questo succede perché il JPEG non supporta uno sfondo trasparente .. se vuoi che sia supportato usa png (l'estensione di default) altrimenti puoi impostare un colore di riempimento non trasparente sulla tela usando. fillStyle e. fillRect

Answer 2

L'immagine creata con un tipo "image/jpeg" ha uno sfondo nero predefinito. Si consideri il frammento di seguito in cui la tela si trova sulla sinistra e l'immagine catturata è sulla destra:

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>

Se avete disegnato solo sagome nere sulla tela, non sarà vederli su uno sfondo JPEG nero predefinito.

Se si utilizza invece il tipo image/png, lo sfondo sarà trasparente per impostazione predefinita.