web-dev-qa-db-fra.com

canvas.toDataURL donne une image noire solide?

J'ai un élément de toile avec un peu de griffonnage.

J'utilise ce qui suit pour convertir le canevas en jpeg:

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

Cependant, au lieu de mon doodle, j'obtiens un jpeg noir solide.

Quelqu'un peut-il me dire ce que je fais mal?

Merci!

javascriptjquerycanvashtml5-canvas
15
user1031947

Cela se produit car le JPEG ne prend pas en charge un arrière-plan transparent .. si vous souhaitez que cela soit pris en charge, utilisez png (l'extension par défaut) sinon vous pouvez définir une couleur de remplissage non transparente sur le canevas à l'aide de .fillStyle et .fillRect

23
shakirthow

Image créée avec un "image/jpeg" type a un fond noir par défaut. Considérez l'extrait ci-dessous dans lequel la toile est à gauche et l'image capturée à droite:

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>

Si vous n'avez dessiné que des formes noires sur la toile, vous ne les verrez pas sur un fond JPEG noir par défaut.

Si vous utilisez plutôt le type image/png, l'arrière-plan sera transparent par défaut.

12
apsillers