Zeichnen von PNG auf ein Canvas-Element – ​​Transparenz wird nicht angezeigt

Lesezeit: 3 Minuten

Ich versuche, drawImage zu verwenden, um ein halbtransparentes PNG auf einem Canvas-Element zu zeichnen. Es zeichnet das Bild jedoch als vollständig undurchsichtig. Wenn ich mir die zu ladende Ressource ansehe und das eigentliche PNG im Browser lade, wird die Transparenz angezeigt, aber wenn ich sie auf die Leinwand zeichne, ist dies nicht der Fall. Irgendwelche Ideen?

Hier ist der Code:

drawing = new Image() 
drawing.src = "https://stackoverflow.com/questions/8977369/draw.png" 
context.drawImage(drawing,0,0);

  • Bitte zeigen Sie einen reproduzierbaren Testfall mit dem Problem und dem Betriebssystem/Browser/Version, wo es fehlschlägt. Dies funktioniert im Allgemeinen korrekt.

    – Phrogz

    23. Januar 2012 um 19:53 Uhr

  • Ich hatte das gleiche Problem und mein HTML sieht so aus eines. Spielt es eine Rolle, wo das Skript platziert wird? Wenn Sie auf Senden klicken, funktioniert es, aber wenn Sie die Seite neu laden, wird das Bild nicht gerendert

    – kon psych

    26. Mai 2013 um 23:24 Uhr


Benutzer-Avatar
Menno Bieringa

Vergessen Sie nicht, dem Ladeereignis des Bildes einen Ereignis-Listener hinzuzufügen. Das Laden von Bildern geschieht im Hintergrund. Wenn also der JavaScript-Interpreter zum Teil canvas.drawImage gelangt, ist es höchstwahrscheinlich, dass das Bild noch nicht geladen wurde und nur ein leeres Bildobjekt ohne Inhalt ist.

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

Sie können einfach ein beliebiges transparentes Bild mit einfügen Image Objekt:

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>

  • Dasselbe wie das mit den meisten Upvotes. Der Unterschied zwischen der Frage und diesen 2 Antworten ist der image.onload.

    – Eric Silveira

    23. Februar 2021 um 23:39 Uhr


Es sollte gut funktionieren, sind Sie sicher, dass Ihr Bild wirklich transparent ist und nicht nur weiß im Hintergrund?

Hier ist ein Beispiel für das Zeichnen eines transparenten PNG über einem schwarzen Rechteck, um Ihren Code darauf aufzubauen:

http://jsfiddle.net/5P2Ms/

Benutzer-Avatar
Stev0

Wenn Sie es in einer Renderschleife zeichnen, müssen Sie sicherstellen, dass es ausgeführt wird context.clearRect( 0, 0, width, height ) zuerst, sonst schreibst du einfach das png über das png in jedem Frame, was schließlich undurchsichtig wird. (Frames werden jedoch schnell gerendert, sodass Sie dies nicht mit bloßem Auge sehen würden.)

NB, wenn Sie verwenden sollten canvas.toDataURL und Sie setzen den Mimetyp auf etwas anderes als sagen gif oder pngwerden die transparenten Teile des Bildes vollständig schwarz.

drawing = new Image();
drawing.onload = function () {
    context.drawImage(drawing,0,0);
    var base64 = canvas.toDataURL('image/png', 1);
};
drawing.src = "https://stackoverflow.com/questions/8977369/draw.png";

  • Was macht die Variable “base64” eigentlich in diesem Code? Ich sehe es nirgendwo anders geschrieben.

    – Chewie Der Chorkie

    5. September 2015 um 3:42 Uhr

  • @vagueexplanation Mach vier.

    – Lukas Madhanga

    5. September 2015 um 10:51 Uhr

  • Was macht die Variable “base64” eigentlich in diesem Code? Ich sehe es nirgendwo anders geschrieben.

    – Chewie Der Chorkie

    5. September 2015 um 3:42 Uhr

  • @vagueexplanation Mach vier.

    – Lukas Madhanga

    5. September 2015 um 10:51 Uhr

1157830cookie-checkZeichnen von PNG auf ein Canvas-Element – ​​Transparenz wird nicht angezeigt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy