温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue vue-esign签字板的demo怎么实现

发布时间:2022-04-21 13:40:03 来源:亿速云 阅读:511 作者:iii 栏目:开发技术

本篇内容主要讲解“vue vue-esign签字板的demo怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue vue-esign签字板的demo怎么实现”吧!

    vue vue-esign签字板demo

    使用vue-esign让用户能够在手动签字并返回为base64或者file格式的文件流

    安装

    npm install vue-esign --save

    在main.js中全局引用

    import vueEsign from 'vue-esign'
    Vue.use(vueEsign)

    Demo 

    <template>
      <div class="esigns">
        <vue-esign
          ref="esign"
          style="
            width: 100%;
            height: 400px
          "
          :isCrop="isCrop"
          :lineWidth="lineWidth"
          :lineColor="lineColor"
          :bgColor.sync="bgColor"
        />
        <div class="btn">
          <van-button type="primary" @click="handleReset">重置</van-button>
          <van-button type="info" @click="handleGenerate">确定</van-button>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "Esign",
      data() {
        return {
          lineWidth: 6,
          lineColor: "#000000",
          bgColor: "",
          resultImg: "",
          isCrop: false,
        };
      },
      methods: {
        handleReset() {
          // 清除
          this.$refs.esign.reset();
        },
        handleGenerate() {
          // 获取base64
          var _this = this;
          _this.$refs.esign
            .generate()
            .then((res) => {
              // 转成文件
              var file = _this.dataURLtoFile(res);
                console.log("file:",file )
              //调用接口
              uploadFile(file).then(({ data }) => {
               console.log("data:",data)
              });
            })
            .catch((err) => {
              _this.$toast(err); 
            });
        },
        // 将base64转换为file
        dataURLtoFile(dataurl) {
          let arr = dataurl.split(",");
          let mime = arr[0].match(/:(.*?);/)[1];
          let bytes = atob(arr[1]); // 解码base64
          let n = bytes.length;
          let ia = new Uint8Array(n);
          while (n--) {
            ia[n] = bytes.charCodeAt(n);
          }
          return new File([ia], "easign.jpg", { type: mime });
        },
      },
    };
    </script>
    <style scoped>
    .btn {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
    }
    </style>

    vue移动端电子签名demo

    HTML

    <template>
        <div id='canvasBox'>
            <div ref="canvasBox">
                 <canvas id="canvas" ref="canvas" height="150"></canvas>
            </div>
            <div class="row row-space-between">
              <button  @click="onClickCancle">取消</button>
              <button @click="clear">重签</button>
              <button @click="save">确认</button>
            </div>
            <!-- <img :src="singImgUrl" alt /> -->
        </div>
    </template>

    JS相关代码

    <script>
    var draw;
    var preHandler = function(e) {
      e.preventDefault();
    };
    class Draw {
      constructor(el) {
        this.el = el;
        this.canvas = document.getElementById(this.el);
        this.cxt = this.canvas.getContext("2d");
        this.stage_info = canvas.getBoundingClientRect();
        this.path = {
          beginX: 0,
          beginY: 0,
          endX: 0,
          endY: 0
        };
      }
      init(btn) {
        var that = this;
        this.canvas.addEventListener("touchstart", function(event) {
          document.addEventListener("touchstart", preHandler, false);
          that.drawBegin(event);
        });
        this.canvas.addEventListener("touchend", function(event) {
          document.addEventListener("touchend", preHandler, false);
          that.drawEnd();
        });
        this.clear(btn);
      }
      drawBegin(e) {
        var that = this;
        window.getSelection()
          ? window.getSelection().removeAllRanges()
          : document.selection.empty();
        this.cxt.strokeStyle = "#BC4C2D";
        this.cxt.beginPath();
        this.cxt.moveTo(
          e.changedTouches[0].clientX - this.stage_info.left,
          e.changedTouches[0].clientY - this.stage_info.top
        );
        this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left;
        this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top;
        canvas.addEventListener("touchmove", function() {
          that.drawing(event);
        });
      }
      drawing(e) {
        this.cxt.lineTo(
          e.changedTouches[0].clientX - this.stage_info.left,
          e.changedTouches[0].clientY - this.stage_info.top
        );
        this.path.endX = e.changedTouches[0].clientX - this.stage_info.left;
        this.path.endY = e.changedTouches[0].clientY - this.stage_info.top;
        this.cxt.stroke();
      }
      drawEnd() {
        document.removeEventListener("touchstart", preHandler, false);
        document.removeEventListener("touchend", preHandler, false);
        document.removeEventListener("touchmove", preHandler, false);
        //canvas.ontouchmove = canvas.ontouchend = null
      }
      clear(btn) {
        this.base64Id = "";
        this.cxt.clearRect(0, 0, 500, 600);
      }
      save() {
        var blank = document.createElement("canvas"); //系统获取一个空canvas对象
        blank.width = canvas.width;
        blank.height = canvas.height;
        let flag = canvas.toDataURL("image/png") == blank.toDataURL(); //比较值相等则为空;
        if (flag) {
          return "0";
        } else {
          return canvas.toDataURL("image/png");
        }
      }
    }
    export default {
      data() {
        return {
          singImgUrl: ""
        };
      },
      methods: {
    	 clear() {
            draw.clear();
            this.base64Id = "";
    	 },
       	save() {
          var data = "";
          data = draw.save();
          if (data == "0") {
          		this.$toast("请先签名再点击确定哦~");
          } else {
    	      this.singImgUrl = data;
    	      ///data 就是得到的base64格式的签名图片,根据业务这里可上传到服务器
          }
          // 
        },
    },
     mounted() {
     document.getElementById("canvasBox").addEventListener("touchmove", (e) => {
          e.preventDefault();
        });//阻止浏览器默认行为,防止签名浏览器下拉-------很重要
        this.base64Id = "";
        let _width = this.$refs.canvasBox.offsetWidth;
        this.$refs.canvas.width = _width; //适配移动端宽度给canvas
        draw = new Draw("canvas");
        draw.init();
      }
    }
    </script>

    到此,相信大家对“vue vue-esign签字板的demo怎么实现”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI