canvas签名图片旋转

---

前言

当使用canvas完成横屏签名功能时，最后签名图片需要旋转角度，保证图片横铺

---

一、实现思路

思路是重新创建应该canvas，将图片填充进去，最后旋转canvas，最后保存旋转过会的图片。

二、详细代码

代码如下（示例）：

rotateBase64Img(src, edg) {
  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 () {
      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);
      console.log(canvas.toDataURL())//旋转之后图片base64
  }

调用方法穿入canvas绘制之后图片（src），以及旋转角度edg，最后得到旋转之后图片canvas.toDataURL()

总结

重点是绘制完再旋转.