Блог

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

Как загрузить изображение на холст из определенной папки с файлами с помощью Javascript?

#javascript #image #html5-canvas #loading

Вопрос:

Вот мой код. Я могу успешно загрузить изображение, но я хочу получить изображение из одной папки файлов в виде img src, которая находится в моей папке ресурсов.

 function LoadInput(){
  var canvas = document.getElementById("defaultCanvas0");
  var ctx = canvas.getContext("2d");
  
  var imgPos = {
    x: 1370,
    y: 626,
    width: 0,
    height: 0
  }
  
  var reader = new FileReader()
  var img = new Image()
  
  var loadImage = (e) =>{
    reader.onload = () =>{
      img.onload = () =>{
        ctx.drawImage(img,imgPos.width, imgPos.height, imgPos.x, imgPos.y);
      };
      
      img.src = reader.resu<
    };
    reader.readAsDataURL(e.target.files[0])
  };
  
  var imageLoader = document.getElementById("loadInput");
  imageLoader.addEventListener("change",loadImage);
}

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

1. Пожалуйста, не делитесь изображениями кода: вместо этого вставьте фактический код в сам вопрос в блок кода.

2. Что ты имеешь в виду? вы не можете загрузить изображение с клиентского компьютера/папки — оно должно поступать с сервера, чаще всего вы просто делаете это img.src = '/assets/img/cat.png'

3. кстати, есть лучший способ загрузки изображений, img.src = URL.createObjectURL(file) который не включает асинхронный код и более медленный читатель файлов

Метки: