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

Question

var img = new Image ();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.

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