Zeichnen von PNG auf ein Canvas-Element - ohne Transparenz

Ich versuche, drawImage zu zeichnen, ein semi-transparentes PNG auf ein canvas-element. Aber es zeichnet das Bild, als völlig undurchsichtig. Wenn ich mir die Ressource, die geladen wird, und laden Sie die tatsächliche PNG im browser, es zeigt die Transparenz, aber wenn ich ziehen Sie es auf die Leinwand, tut es nicht. Irgendwelche Ideen?

Hier der code:

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

InformationsquelleAutor der Frage pixielex | 2012-01-23

  1. 24

    Vergessen Sie nicht, fügen Sie einen Ereignis-listener, um das Bild, das load-Ereignis. Das laden der Bilder ist etwas, das passiert im hintergrund, so dass, wenn der JavaScript-interpreter wird auf die Leinwand.drawImage Teil ist es sehr wahrscheinlich, das Bild wird wahrscheinlich nicht geladen haben, noch, und ist nur ein leeres image-Objekt, ohne Inhalt.

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

    InformationsquelleAutor der Antwort Menno Bieringa

  2. 3

    Eigentlich sollte es funktionieren, bist du sicher, dass dein Bild ist wirklich transparent und nicht nur weiße im hintergrund?

    Hier ist ein Beispiel der Zeichnung ein transparentes PNG über ein Schwarzes Rechteck Basis-code Weg von:

    http://jsfiddle.net/5P2Ms/

    InformationsquelleAutor der Antwort Simon Sarris

  3. 3

    Wenn Sie die Zeichnung in einem render-Schleife, die Sie brauchen, um stellen Sie sicher, dass Sie context.clearRect( 0, 0, width, height ) zuerst, sonst Sie sind einfach nur zu schreiben das png über die png-Datei für jeden frame, die schließlich undurchsichtig. (Aber frames Rendern schnell, so dass Sie nicht sehen mit bloßem Auge.)

    InformationsquelleAutor der Antwort Stev0

  4. 2

    NB, wenn Sie zu nutzen, um die canvas.toDataURL und legen Sie den mimetype etwas anderes sagen, als das gif oder png die transparenten Teile des Bildes wird komplett schwarz.

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

    InformationsquelleAutor der Antwort Luke Madhanga

Schreibe einen Kommentar