импортирование изображений на холсте html5

Question

var img = new Изображение(); img.src = '/images/backdrop.jpg'; ctx.drawImage (img, 0,0); Я хотел загрузить изображение с локального диска на холст, используя механизм диалогового окна, а не путь, непосредственно указанный, как указано выше. Я пробовал разные типы, используя javascript, но тщетно, даже пытался использовать тип ввода в качестве файла. что еще я могу попробовать?

Answer 1

Посмотрите здесь:

• https://developer.mozilla.org/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

Это важно иметь drawImage вызов после загрузки изображения:

var img = new Image(); 
img.onload = function() { 
    var ctx = document.getElementById('ctx').getContext('2d'); 
    ctx.drawImage(img, 0, 0); 
} 
img.src = 'images/backdrop.jpg'; 

Кроме того, обратите внимание, что вы, вероятно, хотите использовать images/backdrop.jpg вместо /images/backdrop.jpg (обратите внимание, что перед ним нет косой черты), так как использование последнего получило бы образ из корневого каталога, я бы предположил, что, вероятно, нет, где ваши изображения.

Что касается загрузки из диалогового окна, вы можете заменить последнюю строку выше с чем-то вроде этого:

var name = prompt("Enter the name of the file", "backdrop.jpg"); 
img.src = 'images/' + name; 

Таким образом, пользователь сможет ввести имя файла изображения для его загрузки. Конечно, вы должны иметь этот файл в своей папке images.

Надеюсь, это поможет.

Answer 2

Вы всегда можете запросить файл, загрузить его во временную папку на сервере, а затем загрузить его обратно на холст ...

страница может обеспечить прогресс бар в то время как процесс происходит. (я думаю, что это лучший способ из-за безопасности песочницы)