Как загрузить любое количество изображений на холст

-2

Как загрузить любое количество изображений на холст. Число может быть 5,6 ... как я могу это сделать. Далеко я могу загрузить только 2 изображения, но этот код не будет работать для динамического количества изображений. Код должен быть таким, чтобы он загружал много изображений.Как загрузить любое количество изображений на холст

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
     body { 
      margin: 0px; 
      padding: 0px; 
     } 
    </style> 
</head> 
<body> 
    <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 availableTags = <?php echo json_encode($img_arr1) ?>; 

var sources = { 
    darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg', 
    yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg' 

}; 

loadImages(sources, function(images) { 
    context.drawImage(images.darthVader, 100, 30, 200, 137); 
    context.drawImage(images.yoda, 350, 55, 93, 104); 
}); 

</script> 
</body> 
</html>

источник

2016-10-10 Faizan

[ 'для ... в ...'] (https: // разработчик. mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) – Andreas

Пользователь вводит любое число, после чего изображения загружаются, например, пользователь вводит 5, затем загружаются 5 изображений , – Faizan

Сохранить соответствующие данные в виде списка объектов и петли через них:

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
//var availableTags = <?php echo json_encode($img_arr1) ?>; 
 
var sourceSets = []; 
 
var sources = {}; 
 
//Draw function 
 
function draw() { 
 
\t //Clear board 
 
\t context.clearRect(-10, -10, 4000, 4000); 
 
\t //Loop through images and draw each one 
 
\t for (var i = 0; i < sourceSets.length; i++) { 
 
\t \t context.drawImage(sourceSets[i].img, sourceSets[i].x, sourceSets[i].y, sourceSets[i].w, sourceSets[i].h); 
 
\t } 
 
} 
 

 
function loadSource(src, x, y, w, h) { 
 
\t //Setting defaults 
 
\t if (src === void 0) { 
 
\t \t src = ''; 
 
\t } 
 
\t if (x === void 0) { 
 
\t \t x = 0; 
 
\t } 
 
\t if (y === void 0) { 
 
\t \t y = 0; 
 
\t } 
 
\t if (w === void 0) { 
 
\t \t w = 100; 
 
\t } 
 
\t if (h === void 0) { 
 
\t \t h = 100; 
 
\t } 
 
\t //Creating image and loading from src 
 
\t if(sources[src] === void 0) { 
 
\t \t sources[src] = new Image(); 
 
\t \t sources[src].onload = function() { 
 
\t \t \t draw(); 
 
\t \t }; 
 
\t \t sources[src].src = src; 
 
\t } 
 
\t var img = sources[src]; 
 
\t img.src = src; 
 
\t //Save all relevant data in an object 
 
\t sourceSets.push({ 
 
\t \t src : src, 
 
\t \t x : x, 
 
\t \t y : y, 
 
\t \t w : w, 
 
\t \t h : h, 
 
\t \t img : img 
 
\t }); 
 
} 
 
//Add whatever amount of images here 
 
var amount = parseInt(prompt("amount",4)); 
 
for(var i = 0; i < amount; i++) { 
 
\t if(i%2 === 0) { 
 
\t \t loadSource('http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg', Math.random() * 400, Math.random() * 400, 200, 137); 
 
\t } else { 
 
\t \t loadSource('http://www.html5canvastutorials.com/demos/assets/yoda.jpg', Math.random() * 400, Math.random() * 400, 93, 104); 
 
\t } 
 
}

<canvas id="myCanvas" width="600" height="540"></canvas>

источник

2016-10-10 13:05:05

Если у меня есть массив изображений.? как var availableTags = ; Тогда как загрузить изображения – Faizan

Зависит от того, как выглядит элемент в '$ img_arr1'. –

У меня есть json array.Containing images – Faizan

Как загрузить любое количество изображений на холст

ответ

Смежные вопросы