Ich zeichne ein Bild mit RGB-Pixeldaten. Ich muss für dieses Bild eine transparente Hintergrundfarbe einstellen. Welchen Wert kann ich einstellen, damit Alpha ein transparentes Bild ist? Oder gibt es dafür eine andere Lösung?HTML5, wie transparentes Pixelbild in Leinwand zu zeichnen
Wenn ich verstehe, was Sie brauchen, möchten Sie im Grunde bestimmte Farben auf einem Bild transparent machen. Um das zu tun, müssen Sie getImageData verwenden, um mdn for an explanation on pixel manipulation zu überprüfen.
Heres einige Beispielcode
var imgd = ctx.getImageData(0, 0, imageWidth, imageHeight),
pix = imgd.data;
for (var i = 0, n = pix.length; i <n; i += 4) {
var r = pix[i],
g = pix[i+1],
b = pix[i+2];
if(g > 150){
// If the green component value is higher than 150
// make the pixel transparent because i+3 is the alpha component
// values 0-255 work, 255 is solid
pix[i + 3] = 0;
}
}
ctx.putImageData(imgd, 0, 0);
Mit dem obigen Code, den Sie für fuschia unter Verwendung
if(r == 255 && g == 0 && b == 255)
Nachdem ich ein Pixelbild gezeichnet habe, muss ich dieses Bild auf mouse move verschieben. Wenn ich dieses Bild verschiebe, kann ich ein weißes Rechteck um das Bild sehen. Ich muss das vermeiden. Oder gibt es eine Möglichkeit, dieses Bild allein anstelle eines Pixelrechtecks zu verschieben? – Joe
Sie müssten das obige tun, außer nach Pixeln suchen, die einen RGB von 255,255,255 (weiß) haben. Sehen Sie sich die jsfiddle an, es erstellt ein temporäres canvas-Element und zeichnet die Ergebnisse darauf. Das müssten Sie tun. Sie würden die Pixelmanipulation durchführen und 'putImageData' verwenden, um die Daten auf einer neuen Leinwand zu platzieren, und das ist das, was Sie anstelle des Bildes bewegen würden. – Loktar
Nach dem Zeichnen von Bildern auf dem Element "temp canvas" habe ich den folgenden Code verwendet und mein Problem wurde gelöst. Vielen Dank für Ihre Hilfe. var imgURL = tempCanvas.toDataURL(); var myImage = neues Bild(); myImage.src = imgURL; context.drawImage (myImage, xPos, yPos); – Joe
ein Alpha von 0 Zeichen, dass Pixel vollständig transparent ist, ist ein Alpha-Wert von 255 vollständig undurchsichtig, was bedeutet, dass es keine Transparenz hat.
Wenn Sie Teile Ihres Bildes vollständig transparent sind (ein Alpha von 0) ist es egal, was Sie für die RGB-Werte verwenden, solange Sie ein Alpha von 0 verwenden habe eine Annahme wie das obere linke Pixel oder das untere rechte Pixel als Transparenzfarbe verwendet. Es würde dann alle Pixel durchlaufen und das Alpha auf 0 setzen, wenn es auf diesen bestimmten RGB-Wert trifft.
Wenn Sie ein Alpha von 127 verwenden und das Bild über einem anderen Bild erscheint, sieht es so aus, als wären die beiden Bilder gleich sichtbar oder das untere Bild blutet 50% seiner Farben bis zum oberen Bild.
Legen Sie eine Variable für Alpha fest, wenn Sie testen und sehen möchten, wie es aussieht, wenn Sie es auf das gesamte Bild anwenden.
Wenn ich 0 für Alpha in allen Pixeln festlegen, drehen sich meine Bildteil vollständig zu weiß. – Joe
überprüfen konnte ich glaube, Sie wollen, dass die clearRect Leinwand m ethode:
http://www.w3schools.com/html5/canvas_clearrect.asp
Dies wird Ihnen klar Pixel transparent (oder einem anderen RGBA-Farb) ohne viel Aufhebens oder Pixelmanipulation lassen.
verwandt: http://stackoverflow.com/questions/2916938/how-to-draw-transparent-image-with-html5-canvas-element – Nobita