Sto disegnando un'immagine utilizzando dati di pixel RGB. Devo impostare un colore di sfondo trasparente per quell'immagine. Quale valore posso impostare affinché alpha sia un'immagine trasparente? O c'è qualche altra soluzione per questo?HTML5 come disegnare un'immagine di pixel trasparente su tela
Se ho capito di cosa hai bisogno, in pratica vuoi trasformare i colori specifici su un'immagine trasparente. Per fare ciò è necessario utilizzare getImageData check out mdn for an explanation on pixel manipulation.
Heres alcuni esempi di codice
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);
Con il codice di cui sopra si potrebbe verificare la presenza di fucsia utilizzando
if(r == 255 && g == 0 && b == 255)
Dopo aver disegnato l'immagine pixel, devo spostare quell'immagine su evento mousemove. Quando sposto quell'immagine, posso vedere un rettangolo bianco attorno a quell'immagine. Ho bisogno di evitarlo. O c'è un modo per spostare l'immagine da sola al posto del rettangolo di pixel? – Joe
Dovresti fare quanto sopra, eccetto cercare i pixel che hanno un rgb di 255.255.255 (bianco). Guarda il jsfiddle, crea un elemento canvas temporaneo e ne disegna i risultati. Questo è quello che dovresti fare. Faresti la manipolazione dei pixel e userai 'putImageData' per mettere i dati su una nuova tela, e questo è ciò che vuoi spostare invece dell'immagine. – Loktar
Dopo aver disegnato l'immagine sull'elemento temp canvas, ho usato il codice seguente e il mio problema è risolto. Grazie per il tuo aiuto. var imgURL = tempCanvas.toDataURL(); var myImage = new Image(); myImage.src = imgURL; context.drawImage (myImage, xPos, yPos); – Joe
un alfa di 0 indica che il pixel è completamente trasparente un valore alfa di 255 è completamente opaco, il che significa che non avrà trasparenza.
se le porzioni dell'immagine sono completamente trasparenti (un alfa di 0) non importa ciò che si utilizza per i valori RGB purché si usi un alfa di 0. Su una nota si vedano alcuni vecchi programmi di Windows che hai usato come presupposto un pixel in alto a sinistra o il pixel in basso a destra come colore della trasparenza. Avrebbe quindi eseguito il ciclo di tutti i pixel e impostato l'alfa su 0 quando ha incontrato questo specifico valore RGB.
Se si utilizza un Alpha di 127 e l'immagine è stata visualizzata sopra un'altra immagine, le due immagini saranno ugualmente visibili o l'immagine in basso sta perdendo il 50% dei suoi colori fino all'immagine superiore.
Impostare una variabile per alfa se si desidera verificare e vedere come appare quando lo si applica all'intera immagine.
Quando ho impostato 0 per l'alfa in tutti i pixel, la mia porzione di immagine ruota completamente al bianco. – Joe
Penso che si desidera che il clearRect tela m etodo:
http://www.w3schools.com/html5/canvas_clearrect.asp
Ciò consentirà di pixel chiari a trasparente (o qualsiasi altro colore RGBA) senza confusione o modifica dei pixel.
correlati: http://stackoverflow.com/questions/2916938/how-to-draw-transparent-image-with-html5-canvas-element – Nobita