技術標籤：reactvue.jsjquery

圖片90°倍數旋轉方法

      rotateBase64Img(src, edg, callback) {
        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);
          ctx.drawImage(image, 0, 0);

          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;
          }
          ctx.putImageData(imgData, 0, 0);
          callback(canvas.toDataURL())
        };
      }
 

在專案裡面使用rotateBase64Img('需要旋轉的base64編碼地址','度數','回撥方法')

 t.rotateBase64Img(signatureImgBase64, '270', function (res) {
  if (window.orientation === 180 || window.orientation === 0) {
                    //豎屏
                quertyData.signatureImgBase64 =res 
              }
              if (window.orientation === 90 || window.orientation === -90) {
                    //橫屏
                quertyData.signatureImgBase64 = signatureImgBase64
              }
            
            })
   )}