web-dev-qa-db-fra.com

Dessin PNG sur un élément de canevas - sans afficher la transparence

J'essaie d'utiliser drawImage pour dessiner un PNG semi-transparent sur un élément canvas. Cependant, il dessine l'image comme complètement opaque. Lorsque je regarde la ressource qui est chargée et que je charge le PNG réel dans le navigateur, cela montre la transparence, mais quand je la dessine sur le canevas, ce n'est pas le cas. Des idées?

Voici le code:

drawing = new Image() 
drawing.src = "draw.png" 
context.drawImage(drawing,0,0);
html5canvaspngtransparencydrawimage
26
pixielex

N'oubliez pas d'ajouter un écouteur d'événements à l'événement de chargement de l'image. Le chargement d'image est quelque chose qui se produit en arrière-plan, donc lorsque l'interpréteur JavaScript arrive à la partie canvas.drawImage, il est très probable que l'image ne sera pas encore chargée et n'est qu'un objet image vide, sans contenu.

drawing = new Image();
drawing.src = "draw.png"; // can also be a remote URL e.g. http://
drawing.onload = function() {
   context.drawImage(drawing,0,0);
};
29
Menno Bieringa

Vous pouvez simplement insérer une image transparente à l'aide de l'objet Image:

var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
var image=new Image();
image.onload=function(){
context.drawImage(image,0,0,canvas.width,canvas.height);
};
image.src="http://www.lunapic.com/editor/premade/transparent.gif";
<canvas id="canvas" width="500" height="500">your canvas loads here</canvas>
5
ANUJ SINGH

NB, si vous deviez utiliser canvas.toDataURL et vous définissez le mimetype sur autre chose que par exemple gif ou png, les parties transparentes de l'image seront complètement noires.

drawing = new Image();
drawing.onload = function () {
    context.drawImage(drawing,0,0);
    var base64 = canvas.toDataURL('image/png', 1);
};
drawing.src = "draw.png";
3
Luke Madhanga

Si vous le dessinez dans une boucle de rendu, vous devez vous assurer d'exécuter context.clearRect( 0, 0, width, height ) d'abord, sinon vous écrivez simplement le png sur le png à chaque image, qui sera finalement opaque. (Mais les images s'affichent rapidement, vous ne verrez donc pas cela à l'œil nu.)

3
Stev0

Cela devrait fonctionner correctement, êtes-vous sûr que votre image est vraiment transparente et pas seulement blanche en arrière-plan?

Voici un exemple de dessin d'un PNG transparent sur un rectangle noir pour baser votre code:

http://jsfiddle.net/5P2Ms/

3
Simon Sarris