javaScript旋转Base64图片并得到新的base64数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javaScript旋转Base64图片并得到新的base64数据相关的知识,希望对你有一定的参考价值。

具体函数的代码就贴在下面了,三个参数

src:图片链接,无论是url地址还是base64数据都可以

edg:旋转角度,注意必须是90°的倍数,否则代码报错,非90°的旋转的根据业务需要裁切裁切,用到的话小伙伴可以动动手修改一下函数

callback:因为img的load是个异步的,所以这才采取回调函数处理load成功的事件,回调的参数就是图片旋转后的base64的数据

 

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("旋转角度必须是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())
      };
    }

函数略大,不优雅,有什么不合理的地方欢迎小伙伴批评指正,共励共勉。

以上是关于javaScript旋转Base64图片并得到新的base64数据的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript插件 图片裁剪photoClip

用javascript实现base64编码器

JavaCV音视频开发宝典:JavaCV读取Base64编码图片并解析预览图片

JavaCV音视频开发宝典:JavaCV读取Base64编码图片并解析预览图片

怎么得到图片的base64编码 - 技术问答

怎么得到图片的base64编码 - 技术问答