Sostiture il colore di sfondo di un'immagine con canvas e drawImage ma... dove sbaglio?

[Chiara85]

Ciao, voglio sostiture il colore di sfondo di un'immagine attraverso canvas e drawImage.

Il codice su una singola immagine funziona, ma se provo a riscriverlo per delle immagini che carico dinamicamente non funziona! Mi restituisce immagini vuote... non fa in tempo a caricarle? Che devo fare? Aiuto!!


Qui c'è il jsFiddle completo:
http://jsfiddle.net/2pGfX/

Qui l'HTML:

<img id="c0">
<img id="c1">
<img id="c2">
<img id="c3">


<canvas id="myCanvas"></canvas>

Qui Javascript:

var items = ["image1.gif", "image2.gif", "image3.gif"];


var arraioParti = [
["a",0, 100,  100, 181, 43],
["b",0, 100,  100, 213, 43],
["c",0, 100,  100, 173, 0],
["d",0, 100,  100, 190, 84]
];


function scegli(parte) {   
scelto = Math.floor(Math.random() * items.length);       
document.getElementById("c" + parte).src = items[scelto];
}


function inizia() {


for (fh=0; fh<arraioParti.length; fh++) { 


        scegli(fh);


        document.getElementById("c" + fh).style.width = arraioParti[fh][2] + "px";
        document.getElementById("c" + fh).style.height = arraioParti[fh][3] + "px";


        traspa("c" + fh);


}
}


function traspa(quale) {


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


var img = new Image();   


img.src = document.getElementById(quale).src;
img.width = document.getElementById(quale).width;
img.height = document.getElementById(quale).height;


       img.onload = function() {
           c.width = img.width;
           c.height = img.height;
           ctx.drawImage(img, 0, 0, c.width, c.height);
       }        


var imgData = ctx.getImageData(0, 0, c.width, c.height);


for (var i=0; i<imgData.data.length; i+=4) {


    if (imgData.data[i] == 255 && imgData.data[i+1] == 0 && imgData.data[i+2] == 255) {


        imgData.data[i] = 255;
        imgData.data[i+1] = 255;
        imgData.data[i+2] = 255;
        imgData.data[i+3] = 0;


    }


}


ctx.putImageData(imgData, 0, 0);
document.getElementById(quale).src = c.toDataURL("image/png");


}


window.onload = inizia();

Un grazie a chi risponde!

[lucavizzi]

Ciao Chiara,
Ho provato a seguire la logica dello script, (non mi è molto "chiara" in realtà) ed ho riscontrato alcuni errori di logica. Alla funzione scegli(), ad esempio, viene passato un array e non una stringa, quindi l'istruzione "document.getElementById("c" + parte)" non ha senso.

Comunque, se il tuo scopo è sostituire lo sfondo di immagini gif trasparenti, puoi semplicemente applicare la regola CSS "background-color" all'immagine stessa.

<img src="gif-trasparente.gif" id="myImg">

<script type="text/javascript">
document.getElementById('myImg').style.backgroundColor='red';
</script>

Luca

[Chiara85]

Un array? No, viene passato un integer (fh è l'integer del for).

Scusa eh, ma abbi pazienza: se le immagini fossero state a sfondo trasparente non mi sarei posta il problema. Se guardi nel jsFiddle vedi che le immagini hanno uno sfondo viola e che io voglio sostituire pixel per pixel il viola (255, 0 255, 255) con il colore trasparente (255, 255, 255, 0).

Tutto qui. Il problema da quanto capisco è che le immagini non fanno in tempo a caricarsi e restituiscono sempre 0 nella fase di verifica del colore:

if (imgData.data[i] == 255 && imgData.data[i+1] == 0 && imgData.data[i+2] == 255)

[lucavizzi]

Scusa, errore mio...