图片旋转并保存图片

最新推荐文章于 2024-05-15 14:15:41 发布

原创最新推荐文章于 2024-05-15 14:15:41 发布 · 792 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

js 专栏收录该内容

47 篇文章

订阅专栏

文章描述了如何使用JavaScript和HTML5CanvasAPI在不同角度（0,90,180,270度）对图片进行旋转，并将旋转后的图片转换为DataURL以便在网页中显示和存储的过程。

let degree = this.rotate;
if (degree === 0) {
this.$message({ message: ‘图片未旋转’, offset: 100 });
return;
}

  const img = new Image();
  // 获取图片src
  img.src = this.currentBigPhoto.img;
  // 获取图片的宽高
  const imgInfo = this.$refs['detail'].getBoundingClientRect();
  if (!imgInfo) {
    return;
  }
  const imgWidth = imgInfo.width;
  const imgHeight = imgInfo.height;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 获取要旋转的角度
  // 旋转360度 0度
  if (degree === 0) {
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    // ctx.rotate((0 * Math.PI) / 180);
    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
  } else if (degree === 90) {
    // 旋转90度
    canvas.height = imgHeight;
    canvas.width = imgWidth;
    ctx.rotate((90 * Math.PI) / 180);
    ctx.drawImage(img, 0, -imgWidth, imgHeight, imgWidth);
  } else if (degree === 180) {
    // 旋转180
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    ctx.rotate((180 * Math.PI) / 180);
    ctx.drawImage(img, -imgWidth, -imgHeight, imgWidth, imgHeight);
  } else if (degree === 270) {
    // 旋转270
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    ctx.rotate((270 * Math.PI) / 180);
    ctx.drawImage(img, -imgHeight, 0, imgHeight, imgWidth);
  }
  // 生成图片的url

  const newImg = canvas.toDataURL();
  // this.a = newImg;
  // 重置页面图片的旋转度数
  this.rotate = 0;
  // 新图替换当前图片
  this.currentBigPhoto.img = newImg;
  // 替换存储中的图片
  this.replaceImg(this.currentBigPhoto.id);