Я хочу, чтобы пользователь перетащил столько изображений, сколько пожелает, на холст html5. Из учебников онлайн я собираю что-то вроде:
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
imgs = arr.map(function callback(currentValue, index, array) {
img = img = document.createElement("img");
}[, thisArg])
mouseDown = false,
brushColor = "rgb(0, 0, 0)",
hasText = true,
clearCanvas = function () {
if (hasText) {
context.clearRect(0, 0, canvas.width, canvas.height);
hasText = false;
}
};
for (var i=0;i<imgs.length;i++){
imgs[i].addEventListener("load",function(){
context.drawImage(img,0,0);
})
}
Я знаю, что строка 4 полностью неправильная..., но обычно люди, похоже, создают свои изображения в качестве переменных, а затем меняют источник с помощью перетаскиваемого изображения. Поскольку мне нужно столько изображений, сколько пользователь хочет добавить, это будет массив без какого-либо размера?
Кроме того, поскольку этот код вызывается один раз, при загрузке страницы, этот массив не может быть добавлен позже (например, когда пользователь решает добавить другое изображение). Так может быть, вся эта парадигма в этом случае неверна?
Может ли кто-нибудь посоветовать мне, как это сделать? Спасибо!
РЕДАКТИРОВАТЬ:
предложенное решение:
imgs_arr = [];
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
imgs = imgs_arr.map(function callback(src) {
var img = document.createElement("img");
img.src = src;
return img;
});
mouseDown = false,
brushColor = "rgb(0, 0, 0)",
hasText = true,
clearCanvas = function () {
if (hasText) {
context.clearRect(0, 0, canvas.width, canvas.height);
hasText = false;
}
};
// Adding instructions
context.fillText("Drop an image onto the canvas", 240, 200);
context.fillText("Click a spot to set as brush color", 240, 220);
function drawImage(element,index,array){
element.addEventListener("load",function(){
clearCanvas()
context.drawImage(element,0,0)
})
}
imgs_arr.forEach(drawImage);
В настоящее время выбрасывает: Cannot read property 'appendChild' of null(anonymous function)
потому что мой imgs_arr пуст - пока никто не добавил изображения.
Предполагая, что ваш arr
- это массив URL-адресов изображений, ваша карта должна выглядеть так:
imgs = arr.map(function callback(src) {
var img = document.createElement("img");
img.src = src;
return img;
});
Я переименовал currentValue
в src
чтобы понять, что это такое, и я удалил дополнительные параметры, но это было технически необязательно.
Важными частями являются:
img
и назначьте его переменной.src
этого 'img. Функция map()
собирает все значения, возвращаемые из обратного вызова, и превращает их в массив. Это даст вам массив объектов Image
(которые представляют собой JS-форму элемента HTML <img>
).
Остальное выглядит более или менее правильно (хотя вы действительно должны использовать ;
вместо того ,
для прекращения ваших линий, чтобы избежать возможных странные вещи).
Кроме того, для добавления большего количества после инициализации вам просто нужно push()
новое Image
на массив и затем перерисовать его.
appendChild()
, поэтому у вас где-то что-то происходит. Вам вообще не нужно вызыватьappendChild()
для этой программы. Вы никуда не добавляете изображения, они просто остаются в памяти. С кодом, который вы показываете, пустой массив не должен вызывать проблем, он просто не будет ничего рисовать.