vue 手写签名模板

最近项目需要用户签名，网上整合了一下 发一下
首先下载一个签名插件

npm i --save sign-canvas

在 main.js中

import SignCanvas from "sign-canvas";//签名插件
Vue.use(SignCanvas);

HTML中

<template>
    <div class="sign">
        <!-- <p class="sign-title">建议您调整手机，横向进行签名！</p> -->
        <div class="btnList" ref="btnList">
            <el-button type="danger" v-throttle size="small" @click="clearSignImg">清空</el-button>
            <!-- <el-button type="primary" v-throttle size="small" class="ml30 mr30" @click="saveSignImg">保存</el-button> -->
            <el-button type="primary" v-throttle size="small" @click="saveSignImg">提交</el-button>
        </div>

        <sign-canvas
        class="sign-canvas"
        ref="SignCanvas"
        :options="options"
        v-model="value"
        />
    </div>
</template>

CSS中

//设置提交按钮的样式
.btnList {
    position: fixed;
    bottom: 10%;
    left: -40%;
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    transform: rotate(90deg);
}
.sign{
    padding: 10px;
    overflow-x: scroll;
    .sign-title{
        font-weight: bold;
        padding: 10px 0;
    }
     .sign-canvas {
        background: #F1F1F1 !important;
        border-radius: 8px;
        position: absolute;
        right: 20px;
        border: 1px solid #000;
   }
     .signName{
        border: 1px solid #000;
    }
}

JS中

<script>
      export default {
          data() {
        return {
        value: null,
        wsobj:{},
        //配置画布
        options: {
            lastWriteSpeed: 1, //书写速度 [Number] 可选
            lastWriteWidth: 2, //下笔的宽度 [Number] 可选
            lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
            lineJoin: "round", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
            canvasWidth: "250", //canvas宽高 [Number] 可选
            canvasHeight: "750", //高度  [Number] 可选
            isShowBorder: false, //是否显示边框 [可选]
            bgColor: "#fcc", //背景色 [String] 可选
            borderWidth: 1, // 网格线宽度  [Number] 可选
            borderColor: "#ff787f", //网格颜色  [String] 可选
            writeWidth: 3, //基础轨迹宽度  [Number] 可选
            maxWriteWidth: 50, // 写字模式最大线宽  [Number] 可选
            minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
            writeColor: "#101010", // 轨迹颜色  [String] 可选
            isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
            imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
            },
            isbase64:""
          };
          }，
          mounted() {

          }，
          methods() {
              //清除画板
               clearSignImg() {
                     this.$refs.SignCanvas.canvasClear();
                },
                 // 保存图片
                saveSignImg() {
                      if (this.value == null) {
                   this.$message({showClose: true,duration:1000,message:'请先签名',type: 'error',});
                      } else {
                      this.rotateBase64Img(this.value, 270,this.callback)   
                       }
                },
              //签名写出来的的角度不对 将base64转换度数
                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())
                     };
                 }
            }，
         callback(base64data) {
        let a = this.base64toFile(base64data) //将base64转换成file流文件进行上传
          this.$confirm('请先确认签名是否正确,一旦签名成功，无法撤销', '签名确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal:false,
            }).then(() => {
                this.upImg(a)
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
                  });
           },
            base64toFile (dataurl, filename = 'file') {
                       let arr = dataurl.split(',')
                      let mime = arr[0].match(/:(.*?);/)[1]
                       let suffix = mime.split('/')[1]
                       let bstr = atob(arr[1])
                       let n = bstr.length
                        let u8arr = new Uint8Array(n)
                      while (n--) {
                           u8arr[n] = bstr.charCodeAt(n)
                           }
                     return new File([u8arr], `${filename}.${suffix}`, {
                        type: mime
                   })
             },
            //上传照片
    upImg(file){
        正常调用接口上传就可以了
      },
      }
</script>