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

ruttan

Nuovo Utente
1 Ago 2014
2
0
0
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/

Il codice HTML:
Codice:
<img id="c0">
<img id="c1">
<img id="c2">
<img id="c3">

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

Il codice Javascript:
Codice:
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();

Grazie infinite a chi solo mi risponderà!
 
Discussioni simili
Autore Titolo Forum Risposte Data
P modifica colore A Hover link website . WordPress 2
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
A inserire variabile php colore in div html PHP 2
Cosina Cambio colore sfondo al click Javascript 2
felino Stampante Epson XP-322: nessuna traccia del colore nero! Hardware 6
L COLORE DETTAGLIO IN FOTO BIANCO E NERO - PHOTOSHOP Photoshop 0
A Aiuto php colore diverso PHP 10
felino Radio button e Bootstrap: modificare il colore di default! HTML e CSS 1
Y Colore sfondo testo Javascript 0
Y Esportare attributi taglia e colore fa Wordpress a Facebook E-Commerce 5
G Cambiare colore ad un record database mysql MySQL 0
R [Photoshop] funzione colore automatico Photoshop 0
Cosina [PHP] Impostare colore singolo elemento in fwrite PHP 2
F [Photoshop] come riempire un area selezionata su un layer trasparente con colore solido Photoshop 0
G Fullcalendar: modificare colore testo, backgroup e bordi per tutti gli eventi jQuery 3
P Colore testo variabile PHP PHP 5
A [HTML] "Tonalita colore immagine del body> HTML e CSS 2
O Allo scroll cambiare colore di sfondo jQuery 0
DaveCricket [WordPress] [PHP] Cambiare il colore del link di una pagina attiva WordPress 3
V Colore Font Php-Html PHP 1
Gregia Immagine con testo affianco (sfondo colore diverso) HTML e CSS 8
V Cambiare colore ad un button HTML e CSS 3
S impostare colore sfondo di ogni cella di una datagridview Visual Basic 1
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
E Pennello Sostituisci Colore Photoshop 13
M Colore testo .NET Framework 1
F Cambio colore immagine Photoshop 2
F Prolungamento colore logo HTML e CSS 1
filippino Sfumare immagine da colore a trsparente Photoshop 1
F colore condizionale jQuery 11
E Problemi di colore backgroung HTML e CSS 1
I Colore di uno sfondo HTML e CSS 1
V Aiuto su Stile CSS cambiare colore ad un modulo Joomla 1
M Colore bordo cella (tabelle HTML) HTML e CSS 1
R Vertex Template (jommla2.5): cambiare colore dell'header Joomla 12
A Cambiare colore bottone app Android Sviluppo app per Android 1
Marcolotto [HTML] Colore bordo tabella HTML e CSS 2
Trapano Cambiare colore ad un td se il campo XXX è = a XXX PHP 10
S Grafico in Chart.js colonne di colore diverso PHP 0
I window.open a seconda del colore del link jQuery 1
Shyson Cambiare colore al pulsante button HTML e CSS 6
I cambio colore in base alla scelta nel form select PHP 6
D cambiare colore al testo il float PHP 1
Z Cambiare colore alla finestra degli avvisi CMS (Content Management System) 1
C Gestione cambio colore dei link con css Javascript 1
Shyson Cambiare colore font nel campo Javascript 26
P colore body con gradiente HTML e CSS 15
G Variazione del colore di sfondo di un link al passaggio mouse Javascript 5
S Linee tabelle di vario colore HTML e CSS 4
V Cambiare il colore della pagina con js [era: html con js] Javascript 11

Discussioni simili