摘要：旋轉(zhuǎn)圖片并得到新的數(shù)據(jù)不合理的地方歡迎小伙伴雅正旋轉(zhuǎn)圖片度，并產(chǎn)生新的數(shù)據(jù)項(xiàng)目開(kāi)發(fā)中，甲方希望上傳圖片的時(shí)候可以調(diào)整圖片的方向，這也是一個(gè)合理要求，不合理又怎么樣呢。

不合理的地方歡迎小伙伴雅正

js旋轉(zhuǎn)base64圖片90*N度，并產(chǎn)生新的base64數(shù)據(jù)

項(xiàng)目開(kāi)發(fā)中，甲方希望上傳圖片的時(shí)候可以調(diào)整圖片的方向，這也是一個(gè)合理要求，不合理又怎么樣呢。

時(shí)間緊迫，我立刻閱覽資料，寄希望與現(xiàn)成的插件，網(wǎng)上的思路是有了，就是利用canvas做圖片旋轉(zhuǎn)，然后用todataURL()函數(shù)生產(chǎn)base64數(shù)據(jù)，思路是對(duì)的，就是函數(shù)都不好用，然后自己決定做一個(gè)吧。

DOM樣例，點(diǎn)擊下面的旋轉(zhuǎn)按鈕就能生成宣傳后的base64數(shù)據(jù)

具體函數(shù)的代碼就貼在下面了，三個(gè)參數(shù)

src:圖片鏈接，無(wú)論是url地址還是base64數(shù)據(jù)都可以

edg:旋轉(zhuǎn)角度，注意必須是90°的倍數(shù)，否則代碼報(bào)錯(cuò)，非90°的旋轉(zhuǎn)的根據(jù)業(yè)務(wù)需要裁切裁切，用到的話小伙伴可以動(dòng)動(dòng)手修改一下函數(shù)

callback:因?yàn)閕mg的load是個(gè)異步的，所以這才采取回調(diào)函數(shù)處理load成功的事件，回調(diào)的參數(shù)就是圖片旋轉(zhuǎn)后的base64的數(shù)據(jù)

    function 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("旋轉(zhuǎn)角度必須是90的倍數(shù)!");
          throw "旋轉(zhuǎn)角度必須是90的倍數(shù)!";
      }
      (edg < 0) && (edg = (edg % 360) + 360)
      const quadrant = (edg / 90) % 4; //旋轉(zhuǎn)象限
      const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐標(biāo)

      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())
      };
    }

函數(shù)略大，不優(yōu)雅，有什么不合理的地方歡迎小伙伴批評(píng)指正，共勵(lì)共勉。
DOM源碼鏈接https://github.com/sure2darli...
下載即用。