前端使用canvas实现图片旋转，得到base64

最新推荐文章于 2024-09-09 11:43:41 发布

勤奋的小码农98

最新推荐文章于 2024-09-09 11:43:41 发布

阅读量562

点赞数 8

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_39177417/article/details/134813073

版权

需求就是将图片旋转180度，把旋转后的图片base64传给后端，主要用到canvas
在这里插入图片描述
旋转的核心代码如下：

  // src是需要旋转的图片url, rotate旋转的角度
  function rotateImg(src, rotate) {
    return new Promise((resolve, reject) => {
      let img = new Image();
      img.src = src;
      img.setAttribute('crossOrigin', 'Anonymous');
      img.onload = () => {
        let canvas = document.createElement('canvas');
        let context: any = canvas.getContext('2d');
        if (rotate > 45 && rotate <= 135) {
          // 90 宽高颠倒
          canvas.width = img.height;
          canvas.height = img.width;
        } else if (rotate > 225 && rotate <= 315) {
          // 270 宽高颠倒
          canvas.width = img.height;
          canvas.height = img.width;
        } else {
          canvas.width = img.width;
          canvas.height = img.height;
        }
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.translate(canvas.width / 2, canvas.height / 2);
        context.rotate((rotate * Math.PI) / 180);
        context.translate(-canvas.width / 2, -canvas.height / 2);
        context.drawImage(
          img,
          canvas.width / 2 - img.width / 2,
          canvas.height / 2 - img.height / 2,
          img.width,
          img.height
        );
        context.translate(canvas.width / 2, canvas.height / 2);
        context.rotate((-rotate * Math.PI) / 180);
        context.translate(-canvas.width / 2, -canvas.height / 2);
        context.restore();
        let base64 = canvas.toDataURL();
        resolve(base64);
      };
      img.onerror = reject;
      img.setAttribute('crossOrigin', 'anonymous'); //关键
    });
  }

我这边需求的使用场景代码：

  // 通过旋转角度监听是否进行旋转
  useEffect(() => {
    if (angle) {
      rotateImg(imgBaseURL + url, angle)
        .then((base64) => {
          handleRotate(base64);
        })
        .catch((err) => {
          console.log(err);
        });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [angle]);