Блог

Главная - Вопросы по программированию - Как загрузить любое количество изображений на холст

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

#javascript #html #html5-canvas

#javascript #HTML #html5-холст

Вопрос:

Как мне загрузить любое количество изображений на холст. Число может быть 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>

Комментарии:

1. for...in...

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

Ответ №1:

Сохраните соответствующие данные в виде списка объектов и просматривайте их:

 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() {
	//Clear board
	context.clearRect(-10, -10, 4000, 4000);
	//Loop through images and draw each one
	for (var i = 0; i < sourceSets.length; i  ) {
		context.drawImage(sourceSets[i].img, sourceSets[i].x, sourceSets[i].y, sourceSets[i].w, sourceSets[i].h);
	}
}

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

Комментарии:

1. Если у меня есть массив изображений.? типа var availableTags = <?php echo json_encode($img_arr1) ?>; Тогда как я могу загрузить образы

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

3. У меня есть массив json. Содержащий изображения

4. foreach($img_arr1 as $img){ echo 'loadSource("' . $img . '"); '; }