jl-p Posted February 23, 2015 Share Posted February 23, 2015 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 More sharing options...
justsomeguy Posted February 23, 2015 Share Posted February 23, 2015 It sounds like you know what to do. Why are those images defined as properties of an object though? It would make more sense if it was an array of filenames. Link to comment Share on other sites More sharing options...
jl-p Posted February 23, 2015 Author Share Posted February 23, 2015 (edited) 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 February 23, 2015 by jl-p Link to comment Share on other sites More sharing options...
jl-p Posted February 23, 2015 Author Share Posted February 23, 2015 (edited) 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 February 23, 2015 by jl-p Link to comment Share on other sites More sharing options...
justsomeguy Posted February 23, 2015 Share Posted February 23, 2015 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 More sharing options...
jl-p Posted February 24, 2015 Author Share Posted February 24, 2015 yeah i know but how to fix it. because the other example with the object name instead of numbers does work. Link to comment Share on other sites More sharing options...
thescientist Posted February 24, 2015 Share Posted February 24, 2015 review his comment, the answer is right there Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now