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
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";
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
11578300cookie-checkZeichnen von PNG auf ein Canvas-Element – Transparenz wird nicht angezeigtyes
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