base64图片旋转后得到一个base64图片

base64图片旋转后得到一个base64图片

1.vue-esign签名插件

2.生成图片的图片的旋转

//第一个base64地址， 第二个顺时针角度, 第三个回调函数
	this.rotateBase64Img(src, edg， data => {
		console.log("旋转后的base64", data);
	}) 
 // 旋转图片
      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的倍数!')
          return '旋转角度必须是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 = () => {
          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(dataURLtoFileBlob(src))
          callback(canvas.toDataURL())
          // callback(canvas.toDataURL())
        }
      },

3.将 base64的图片 转换为 file 对象

      // 附：base64转化成图片
      base64ImgtoFile (dataurl, fileName = "file") {
        const arr = dataurl.split(",");
        const mime = arr[0].match(/:(.*?);/)[1];
        const suffix = mime.split("/")[1];
        const bstr = atob(arr[1]);
        let n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], `${fileName}.${suffix}`, { type: mime });
      },

============================================================================

实例代码

<template>
    <div>
      <div class="NavBar">
        <bn-navBar title="电子签名" :leftArrow="false"></bn-navBar>
      </div>
  
      <div>
        <div class="SignPlace">
          <vue-esign
            ref="esign"
            class="esign-box"
            :width="windowWidth"
            :height="750"
            :isCrop="isCrop"
            :lineWidth="lineWidth"
            :lineColor="lineColor"
          />
  
          <!-- 写好的签字会放在这个图片里 -->
          <img :src="imgSrc" width="400" :height="windowHeight" v-if="false" />
        </div>
        <div class="SignTips" id="main">
          <span id="TipSpan">请在上方空白处书写您的名字</span>
          <van-button type="info" @click="handleGenerate">提交签字</van-button>
          <van-button
            plain
            type="info"
            style="background-color: transparent"
            @click="handleReset"
            >清除重写</van-button
          >
        </div>
      </div>
    </div>
  </template>
  
  <script>
  const environment = process.env.VUE_APP_ENV || 'production'
  
  import { Toast } from "vant";
  import axios from "axios";
  import { setMoSignature, getCosInfo } from "../../api/register";
  
  export default {
    data () {
      return {
        lineWidth: 5,
        lineColor: "black",
        resultImg: "",
        isCrop: false,
        imgSrc: "",
        signImage: null,
        windowWidth: document.documentElement.clientWidth, //获取屏幕宽度
        windowHeight: window.innerHeight, //获取屏幕高度
      };
    },
    created () {
      console.log(
        "document.documentElement.clientHeight",
        document.documentElement.clientHeight
      );
      console.log("this.$route.params", this.$route.params);
    },
  
    methods: {
      handleReset () {
        this.$refs.esign.reset();
      },
      // 生成签名的base64图片 提交
      handleGenerate () {
        this.$refs.esign.generate()
          .then((res) => {
            // 1.先将签名旋转 res-旋转前base64，  data-旋转后base64
            this.rotateBase64Img(res, 270, data => {
              // 打印旋转后的图片base64
              console.log('data', data);

              // 2.将base64文件转为File文件-图片
              this.imgSrc = res            
              const file = this.base64ImgtoFile(data);
              console.log('res', res);
              // 3.再将签名提交到
              const that = this;
              if (file) {
                console.log("file", file);
                this.getCosInfoFn(file);
              }
            })

          })
          .catch((err) => {
            const errorMessage = "提交签名时出错，因为还未进行签字。";
            Toast("请设置签名");
            console.error(errorMessage);
            console.log("画布没有签字时会执行这里 Not Signned");
          });
      },
      // 附：base64转化成图片
      base64ImgtoFile (dataurl, fileName = "file") {
        const arr = dataurl.split(",");
        const mime = arr[0].match(/:(.*?);/)[1];
        const suffix = mime.split("/")[1];
        const bstr = atob(arr[1]);
        let n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], `${fileName}.${suffix}`, { type: mime });
      },

      // 提交
      async submitNextFn (data) {
        console.log('提交啦··········!,this.signImage', this.signImage)
        const res = await setMoSignature({
          signatureImgUrl: this.signImage,
          signatureId: Number(this.$route.query.signatureId)
        });
        console.log('签名已提交1a', res);
        if (res.code == 200) {
          this.$router.push('/signingSuccess')
        } else {
          Toast(res.message);
        }
      },
  
      // 获取cos签名
      async getCosInfoFn (file, data) {
        const res = await getCosInfo({
          scene: "product_drug",
          suffix: file.name.split(".").pop().toLowerCase(),
          size: file.size,
        });
        console.log("获取cos签名", res);
        if (res.status === 200) {
          var xhr = new XMLHttpRequest();
          xhr.open("PUT", res.data.url, true);
          xhr.onload = function (e) { };
          xhr.onerror = function (e) {
            that.$message({
              message: "上传错误",
              type: "error",
            });
          };
          xhr.send(file);
          this.signImage = res.data.returnUrl;
          this.submitNextFn();
          console.log("获取cos签名url", res.data.returnUrl);
        }
      },

 // 旋转图片
      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的倍数!')
          return '旋转角度必须是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 = () => {
          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(dataURLtoFileBlob(src))
          callback(canvas.toDataURL())
          // callback(canvas.toDataURL())
        }
      },
    },

    // 兼容屏幕
    watch: {
      windowHeight (val) {
        let that = this;
        console.log("实时屏幕高度：", val, that.windowHeight);
      },
      windowWidth (val) {
        let that = this;
        console.log("实时屏幕宽度：", val, that.windowHeight);
      },
    },
  };
  </script>
  
  <style scoped lang="less">
  .body {
    position: relative;
    width: 100%;
    height: 100%;
  }
  /deep/.van-nav-bar__title {
    font-weight: 550;
  }
  .SignTips {
    width: 10%;
    height: 22%;
  }
  #TipSpan {
    font-size: 4vw;
    line-height: 22vw;
    margin-left: 20vw;
  }
  .van-button {
    float: right;
    top: 6vw;
    margin-right: 4vw;
    border-radius: 12px;
    height: 10vw;
    width: 30vw;
  }
  .SignPlace {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  #main {
    position: fixed;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  
  #main {
    position: absolute;
    width: 100vh;
    height: 20vw;
    top: 0;
    left: 20vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 0% 0%;
  }
  
  @media screen and (orientation: landscape) {
    #main {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }
  }
  html,body{
    width:100%;
    height: 100%;
  }
  .esign-box {
    width: 100%;
    height: 100%;
  }
  </style>