canvas.toDataURL sonuçları?

Question

İçinde biraz karalamalar bulunan bir tuval elemanım var.

Bir jpeg tuval dönüştürmek için aşağıdaki kullanıyorum:

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

Ancak yerine benim doodle, ben düz siyah bir jpeg olsun.

Neyi yanlış yaptığımı söyleyen var mı?

Teşekkürler!

Answer 1

Bu, JPEG'in saydam arka planı desteklememesi nedeniyle gerçekleşir. Eğer desteklenmesini istiyorsanız, png (varsayılan uzantı) kullanıyorsanız, tuvali kullanarak saydam olmayan bir dolgu rengi ayarlayabilirsiniz. fillStyle ve. fillRect

Answer 2

"image/jpeg" türü ile oluşturulan görüntü, varsayılan siyah arka plana sahiptir. Aşağıdaki kod parçasını göz önünde hangi tuval solda ve yakalanan görüntü sağda: Yalnızca tuvale siyah şekiller çizdiyseniz

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>

, vermeyeceksin onları varsayılan siyah JPEG arka plana karşı bakın.

Bunun yerine, image/png türünü kullanırsanız, arka plan varsayılan olarak saydam olacaktır.