vue使用canvas实现移动端手写签名


Posted in Javascript onSeptember 22, 2020

基于vue使用canvas实现移动端手写签名!

之前自己开发有这么一个需求,需要实现手写签名,然后以图片的形式保存生成图片的base64数据流 。自己在网上找了一堆,都不是很完美。然后参考网上的加自己的优化和修改做了一版。希望有需要的朋友可以拿来直接用。

HTML部分:

<template>
 <div class="hello" >
  <div>请输入您的签名7:</div>
    <canvas id="canvas" ref="canvasW" width="373" height="200" style="border:1px solid black" >Canvas画板</canvas>
  <img v-bind:src="url" alt="">
  <div>
    <button type="" v-on:click="clear">重写</button>
    <button v-on:click="save">保存签名</button>
  </div>
 </div>
 
</template>

为了节约时间,样式写的比较简单。凑合看吧!

script部分

<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 = "#000"
    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(ev){
      ev.preventDefault()
      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);
  }
  clear(btn) {
    this.cxt.clearRect(0, 0, this.stage_info.width, this.stage_info.height)
    // this.cxt.clearRect(0, 0, 373, 200)
  }
  save(){
    return canvas.toDataURL("image/png")
    console.log(canvas.toDataURL("image/png"))
  }
}

export default {
 data () {
  return {
   msg: '啦啦啦',
   val:true,
   url:""
  }
 },
 mounted() {
   draw=new Draw('canvas');
   draw.init();
 },
 methods:{
  clear:function(){
    draw.clear();
    // 用于点击清除画布时,同时清除上次保存的图片
    this.save()
  },
  save:function(){
    var data=draw.save();
    this.url = data;
    // 生成图片的base64数据流 
  },
mutate(word){
    this.$emit("input", word);
  },
 }
}
</script>

css部分

<style scoped lang="less">
  .hello{
    height: 100%;
    width: 100%;
    background: #ccc;
      h1, h2 { font-weight: normal; } 
      ul { list-style-type: none; padding: 0; } 
      li { display: inline-block; margin: 0 10px; } 
      a { color: #42b983; } 
      #canvas { background: pink; cursor: default; } 
      #keyword-box { margin: 10px 0; } 
      button{font-size: 0.2rem;color: blue;}
 }

效果图:

vue使用canvas实现移动端手写签名

就到这里吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
JSON 入门教程基础篇 json入门学习笔记
Sep 22 #Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 #Javascript
Vue实现开关按钮拖拽效果
Sep 22 #Javascript
JS如何生成动态列表
Sep 22 #Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 #Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 #Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
一个改进的UBB类
2006/10/09 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
Javascript this指针
2009/07/30 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
解析python 类方法、对象方法、静态方法
2020/08/15 Python
python如何实现图片压缩
2020/09/11 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
优秀信贷员先进事迹
2014/01/31 职场文书
中考标语大全
2014/06/05 职场文书
教室布置标语
2014/06/26 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
求职自荐信怎么写
2015/03/04 职场文书
员工升职自荐信
2015/03/27 职场文书
招商银行工作证明
2015/06/17 职场文书
教师节晚会主持词
2015/06/30 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL