js的Canvas逆时针旋转90度

最新推荐文章于 2024-06-27 16:39:50 发布

linjyuan

最新推荐文章于 2024-06-27 16:39:50 发布

阅读量3k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/l1134/article/details/127042966

版权

一、前言：
移动端签字的时候，屏幕是横屏的状态。当签完字的时候，需要将图片逆时针旋转90度，然后把图片上传至服务器

二、思路：
（1）获取到图片的宽度、长度
（2）设置新的 Canvas 的宽度、长度
（3）将内容重新绘制再新画布上
（4）将新画布内容转 base64

三、逆时针旋转代码：

  //签完名的图片旋转处理
  function rotateBase64Img(src: string, edg: number, callback: (e: any) => any) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgW; //图片宽度
    var imgH; //图片高度
    var size; //canvas初始大小
    if (edg % 90 != 0) {
      console.error('旋转角度必须是90的倍数!');
      throw '旋转角度必须是90的倍数!';
    }
    edg < 0 && (edg = (edg % 360) + 360);
    const quadrant = (edg / 90) % 4; //旋转象限
    const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 }; //裁剪坐标
    var image = new Image();
    image.crossOrigin = 'anonymous';
    image.src = src;
    image.onload = function () {
      console.log('加载了');

      imgW = image.width;
      imgH = image.height;
      size = imgW > imgH ? imgW : imgH;
      canvas.width = size * 2;
      canvas.height = size * 2;
      switch (quadrant) {
        case 0:
          cutCoor.sx = size;
          cutCoor.sy = size;
          cutCoor.ex = size + imgW;
          cutCoor.ey = size + imgH;
          break;
        case 1:
          cutCoor.sx = size - imgH;
          cutCoor.sy = size;
          cutCoor.ex = size;
          cutCoor.ey = size + imgW;
          break;
        case 2:
          cutCoor.sx = size - imgW;
          cutCoor.sy = size - imgH;
          cutCoor.ex = size;
          cutCoor.ey = size;
          break;
        case 3:
          cutCoor.sx = size;
          cutCoor.sy = size - imgW;
          cutCoor.ex = size + imgH;
          cutCoor.ey = size + imgW;
          break;
      }
      ctx?.translate(size, size);
      ctx?.rotate((edg * Math.PI) / 180);
      //drawImage向画布上绘制图片
      ctx?.drawImage(image, 0, 0);
      //getImageData() 复制画布上指定矩形的像素数据
      var imgData = ctx?.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
      if (quadrant % 2 == 0) {
        canvas.width = imgW;
        canvas.height = imgH;
      } else {
        canvas.width = imgH;
        canvas.height = imgW;
      }
      //putImageData() 将图像数据放回画布
      ctx?.putImageData(imgData, 0, 0);
      callback(canvas.toDataURL('image/png'));
    };
  }