Array di immagini

**capofern** · 10-08-2012, 09:36

Buongiorno,

chiedo a voi perché ho un qualche problema.

devo dichiarare un'array di immagini per poi visualizzarle in un canvas HTML5.

Ora ho creato una funzione loadImages

var img = new Array();

loadImage();

function loadImage()
{
var i;

for (i = 0; i < 4; i++)
{
img[i] = new Image();
var imgName = "immagine" + i + ".jpg";
img[i].src = imgName;
}
drawScreen();
}

e una funzione drawScreen per disegnarle sul canvas

function drawScreen()
{
var i = 1;
for (i = 0; i < 4; i++)
{
myContext.drawImage(img[i], 0, i*200);
}
}

Però non mi visualizza niente.
Potete aiutarmi per favore?

**carlomarx** · 10-08-2012, 14:00

Il caricamento delle immagini è asincrono rispetto alla dichiarazione dell'array. Devi assegnare una funzione di onload a ogni immagine che crei, la quale incrementi un contatore a ogni chiamata e che faccia scattare la funzione successiva (drawScreen()) appena il contatore delle immagini caricate raggiunge il numero degli elementi dell'array. Qualcosa come:

codice:

var contatore = 0;

function tuaFunzione () {
  if (contatore++ === img.length - 1) {
    drawScreen();
  }
}

e poi nel tuo codice fai così:

codice:

img[i] = new Image();
var imgName = "immagine" + i + ".jpg";
img[i].onload = tuaFunzione;
img[i].src = imgName;

devi inoltre rendere l'array img globale e rimuovere la chiamata drawScreen() dalla tua funzione.

**capofern** · 10-08-2012, 15:48

Grazie mille Compagno!!

Gentilissimo. funziona tutto!!!!!!!

A questo punto ti propongo un altro quesito. E per un'array multidimensionale?????

//Dichiarazione variabili globali
var img = new Array();
var contatore = 0;
var tilesXNr = 49, tilesYNr = 36;
var zoomLevel=0;

for (var i = 0; i <= tilesXNr; i++)
{
for (var j = 0; j < tilesYNr; j++)
{
img[i] = new Image();
var imgName = i+ "_" + j + ".jpg";
img[i].onload = imgLoaded;
img[i].src = imgName;
}
}

////////////////////////
//Funzioni
////////////////////////
function imgLoaded()
{
if (contatore++ === img.length*img[0].length -1) {
drawScreen();
}
}

function drawScreen()
{
var i, j;
for (i = 0; i <= tilesXNr; i++)
{
for (j = 0; j < tilesYNr; j++)
{
context.drawImage(img[i][j], i * 50, j * 50, 50);
}
}
}

Questa é la mia proposta, ma non funziona!

**carlomarx** · 10-08-2012, 17:50

Originariamente inviato da capofern
A questo punto ti propongo un altro quesito. E per un'array multidimensionale?????

Troppo imbrigliato. Quello di prima era un problema di organizzazione degli eventi e ti ho potuto dare una dritta al volo perché potevi benissimo non sapere che il caricamento delle immagini fosse asincrono in JS. Ma quest'altro è un problema di pura logica... potresti sbrigartela da solo (o almeno provarci). Poi alle brutte torna qui

**capofern** · 13-08-2012, 15:19

Questo é il risultato

codice:

<!doctype html> 
<html lang="en"> <head> 
<meta charset="UTF-8"> <title>App</title> <script src="modernizr-1.6.min.js"></script> <script type="text/javascript"> 
window.addEventListener('load', eventWindowLoaded, false); 
function eventWindowLoaded() { 
    canvasApp(); 
} 

//Test del supporto del canvas (Tramite Modernizr) 
function canvasSupport() { 
return Modernizr.canvas; 
} 

//Applicazione lanciata al caricamento della pagina 
function canvasApp(){
      if (!canvasSupport()) { 
          return; 
      } 
     else{  
          var theCanvas = document.getElementById("canvas"); 
         var context = theCanvas.getContext("2d"); 
      } 

      //Dichiarazione variabili globali 
     var img = new Array(); 
     var contatore = 0; 
     var tilesXNr = 36, tilesYNr = 50; 
     var zoomLevel = 0; var dimTiles = 100; 

    //Caricamento IMG VerNico1.4
    for (var x = 0; x < tilesXNr; x++) { 
         img[x] = new Array(); 
        for (var y = 0; y < tilesYNr; y++) { 
             img[x][y] = new Image(); 
             var imgName = y + "_" + x + ".jpg"; 
             img[x][y].onload = imgLoaded; 
             img[x][y].src = imgName; 
            //alert(img[x][y].src); 
         } 
     } 

     //////////////////////// //Funzioni //////////////////////// 
    //ImgLoadedVerNico 1.4 
    function imgLoaded(){ 
        if(contatore++ === tilesYNr) { 
            drawScreen(); 
        } 
     } 

     function drawScreen() { 
         for (var x = 0; x < tilesXNr; x++){ 
              for (var y = 0; y < tilesYNr; y++) { 
                   context.drawImage(img[x][y], y * dimTiles, x * dimTiles, dimTiles, dimTiles); 
              } 
          } 
     } 
} 
</script> </head> <body> <div style="position: absolute; top: 10px; left: 10px;"> <canvas id="canvas" width="9000" height="4000"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>

L'unico problema é che ogni tanto mi salta qualche immagine non caricandomela.
Quindi nella tela ho qualche buco sparso qua e là.

Per il resto sarebbe bello poter automatizzare il fatto che se aumento il numero di immagini nella cartella, va a caricarmele finché non sono finite, senza definire in anticipo il numero di immagini da caricare.
È possibile farlo?????

**Xinod** · 13-08-2012, 16:04

puoi gestire anche l' onerror per tentare di sapere (con il solo lato client) se l' immagine esiste o meno

**carlomarx** · 13-08-2012, 16:57

Non ho tempo di guardare bene tutto, ma a occhio posso sospettare che il problema sta nella scrittura sintetica che ti ho suggerito, che forse non hai colto a pieno. Prova a impostare il contatore iniziale su 1 invece che su 0, OPPURE (le due strade sono alternative ma ugualmente valide) a sostituire la funzione imgLoaded con questa, lasciando il contatore iniziale impostato su 0:

codice:

    function imgLoaded() {
        contatore++;
        if(contatore === tilesYNr) {
            drawScreen();
        }

L'errore probabilmente sta lì

**capofern** · 14-08-2012, 08:19

Penso che non sia li il problema perché mi carica alcune immagini ma non tutte nella tela.
Al caricamento successivo della pagina però le foto non caricate sono altre, e in altro numero!!.

A volte mi carica tutte le immagini.

Sembra quasi che alcune le salta e passa al caricamento della successiva.

Grazie mille per l'aiuto

Discussione: Array di immagini

Strumenti discussione

Ricerca discussione

Visualizza

Array di immagini

Permessi di invio