Вращающийся динамический холст с помощью JavaScript

Question

У меня есть следующий код, который позволяет пользователю загружать изображение, которое помещается на холст, но как только оно было нарисовано, я хочу, чтобы пользователи могли поворачивать изображение одним нажатием кнопки, но я неНе знаю, как повторно получить доступ к объекту изображения, чтобы иметь возможность вращать холст.Приведенный ниже код работает следующим образом:

onFilePicked (e) {
  const files = e.target.files;
  for (let file of files) {
    if(file !== undefined) {
      let image = {
        thumbnail: '/img/spinner.gif'
      };
      this.images.push(image);
      this.loadImage(file, image);
    }
  }
},

loadImage(file, image) {
  const fr = new FileReader();
  fr.readAsDataURL(file);
  fr.addEventListener('load', () => {
    var img = new Image();
    img.src = fr.result;
    img.onload = () => {
      image.thumbnail = this.resizeImage(img, 400, 300);
      image.large = this.resizeImage(img, 1280, 960);
    }        
  })
},

resizeImage(origImg, maxWidth, maxHeight) {
  let scale = 1;
  if (origImg.width > maxWidth) {
    scale = maxWidth / origImg.width;
  }
  if (origImg.height > maxHeight) {
    let scale2 = maxHeight / origImg.height;
    if (scale2 < scale) scale = scale2;
  }

  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");

  canvas.width = origImg.width * scale;
  canvas.height= origImg.height * scale;    
  ctx.drawImage(origImg, 0, 0, canvas.width, canvas.height);
  return canvas.toDataURL("image/jpeg");
},

И ниже показана функция, которую я построил для поворота изображения, - она ​​работает в том случае, если я заменю код внутри функции resizeImage на код ниже, чтоизображение нарисовано так, что оно вращается правильно, но я не знаю, как получить доступ к объекту origImg, чтобы можно было перерисовать холст в отдельной функции.

rotateImage(origImg, maxWidth, maxHeight){
  let scale = 1;
  if (origImg.width > maxWidth) {
    scale = maxWidth / origImg.width;
  }
  if (origImg.height > maxHeight) {
    let scale2 = maxHeight / origImg.height;
    if (scale2 < scale) scale = scale2;
  }

  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");

  canvas.width = origImg.height * scale;
  canvas.height= origImg.width * scale;
  ctx.translate(canvas.width, 0);  
  ctx.rotate(90 * Math.PI / 180);
  ctx.drawImage(origImg, 0, 0, canvas.height, canvas.width);
  return canvas.toDataURL("image/jpeg");
},

Запуск этой функции как естьзапускает следующую консольную ошибку:

Не удалось выполнить 'drawImage' для 'CanvasRenderingContext2D': предоставленное значение не относится к типу '(CSSImageValue или HTMLImageElement или SVGImageElement, или HTMLVideoElement, или HTMLCanvasElement, или ImageBitmap, или ImageBitmap или OffscreenCanvas)

Как получить / повторно использовать объект origImg из функции resizeImage, чтобы я мог использовать его в функции rotateImage?

Answer 1

Поскольку у вас есть часть в onFilePicked(), где вы храните что-то об изображениях:

let image = {
  thumbnail: '/img/spinner.gif'
};
this.images.push(image);

и позже обновите те же объекты в loadImage() (ну, событиеобработчик) как

image.thumbnail = this.resizeImage(img, 400, 300);
image.large = this.resizeImage(img, 1280, 960);

Можно просто расширить до

image.original = img;
image.thumbnail = this.resizeImage(img, 400, 300);
image.large = this.resizeImage(img, 1280, 960);

Начиная с этой точки, объекты в вашем массиве images будут иметьполе original, в котором хранится исходный вариант изображения без изменения размера.

Answer 2

вы можете попробовать с этим кодом:

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(origImg,0,0); // Or at whatever offset you like
};

И применить вашу функцию загрузки кода img и, наконец, преобразовать исходный код img в URL URL

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

function resizeImg()
        {
        
            var oPicker = document.getElementById('avatar');
            var oImage = document.getElementById('imgOut');
            var file = oPicker.files[0];
            const fr = new FileReader();
            fr.readAsDataURL(file);
            fr.addEventListener('load', () => {
                var img = new Image();
                img.src = fr.result;
                img.onload = () => {
                  oImage.thumbnail = this.resizeImage(img, 400, 300);
                  oImage.src = this.resizeImage(img, 1280, 960);
                }        
              })
        }                
        
        function rotateImg()
        {
            var imgOut = document.getElementById('imgOut');
            
            
              let canvas = document.createElement("canvas");
              let ctx = canvas.getContext("2d");
              let scale = 1;
              canvas.width = imgOut.height * scale;
              canvas.height= imgOut.width * scale;
              ctx.translate(canvas.width, 0);  
              ctx.rotate(90 * Math.PI / 180);
              ctx.drawImage(imgOut, 0, 0, canvas.height, canvas.width);
              imgOut.src = canvas.toDataURL("image/jpeg");
              
            
        }
        
        
        function resizeImage(origImg, maxWidth, maxHeight) {
          let scale = 1;
          if (origImg.width > maxWidth) {
            scale = maxWidth / origImg.width;
          }
          if (origImg.height > maxHeight) {
            let scale2 = maxHeight / origImg.height;
            if (scale2 < scale) scale = scale2;
          }

          let canvas = document.createElement("canvas");
          let ctx = canvas.getContext("2d");

          canvas.width = origImg.width * scale;
          canvas.height= origImg.height * scale;    
          ctx.drawImage(origImg, 0, 0, canvas.width, canvas.height);
          return canvas.toDataURL("image/jpeg");
        }

<html>
    <head>
        <title>Test</title>
  </head>
    <body>
        <h1>Image test</h1>
        <img src="" id="imgOut" />
        <label for="avatar">Choose a profile picture:</label>
        <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">
        <input type="button" id="resImg" onclick="resizeImg()" value="Resize" />
        <input type="button" id="rotImg" onclick="rotateImg()" value="Rotate" />
        
    </body>
</html>