Jump to content

how to choose image with variable.


jl-p

Recommended Posts

Hi,

 

I want to load my images based on a variable.

 

I don't want to use a fixed name in the context.drawImage(images.a0,

 

so i want to load my pictures for example as in

 

for (z=0;z<3;z++){

 

context.drawImage(images[z], 100+(z*100), 30, 200, 137);

 

}

    <canvas id="myCanvas" width="578" height="200"></canvas>    <script>      function loadImages(sources, callback) {        var images = {};        var loadedImages = 0;        var numImages = 0;        // get num of sources        for(var src in sources) {          numImages++;        }        for(var src in sources) {          images[src] = new Image();          images[src].onload = function() {            if(++loadedImages >= numImages) {              callback(images);            }          };          images[src].src = sources[src];        }      }      var canvas = document.getElementById('myCanvas');      var context = canvas.getContext('2d');      var sources = {        a0: 'http://eindtijdinbeeld.nl/EiB-Dispensationalisme/01.png',        a1: 'http://upload.wikimedia.org/wikipedia/commons/f/f7/MetroDF_Linea_2.jpg',        a2: 'http://www.sundayschoolleader.com/wp-content/uploads/2014/08/number-3.jpg'      };      loadImages(sources, function(images) {        context.drawImage(images.a0, 100, 30, 200, 137);        context.drawImage(images.a1, 350, 55, 93, 104);      });
Link to comment
Share on other sites

Yes i know. but this is how the example i found worked.

But how do i do that so it keeps working.

because i changed it several times and then i only get one of the pictures or none. when i use a normal array.

 

So i do something wrong but don't see it.

Edited by jl-p
Link to comment
Share on other sites

Also tried this. and then i receive only one picture
 <script>      var canvas = document.getElementById('myCanvas');      var context = canvas.getContext('2d');      var imageObj = new Image();            var source = [];      source[0] = 'http://eindtijdinbeeld.nl/EiB-Dispensationalisme/01.png';      source[1] = 'http://upload.wikimedia.org/wikipedia/commons/f/f7/MetroDF_Linea_2.jpg';            for (z=0;z<2;z++){ var imageObj1 = new Image();      imageObj1.onload = function() {context.drawImage(imageObj1, 69+(z*100), 50);};      imageObj1.src=source[z];      }           </script>
Edited by jl-p
Link to comment
Share on other sites

That particular example fails because you overwrite imageObj1.

var imageObj = [];for (z=0;z<2;z++){  imageObj[z] = new Image();  imageObj[z].onload = (function(idx) {    return (function() {      context.drawImage(imageObj[idx], 69+(idx*100), 50);    });  })(z);  imageObj[z].src=source[z];}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...