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 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
js实现拖动缓动效果
Jan 13 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 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
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP insert语法详解
2008/06/07 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
jquery 插件学习(二)
2012/08/06 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python中%r和%s的详解及区别
2017/03/16 Python
详解Python import方法引入模块的实例
2017/08/02 Python
详解python中的装饰器
2018/07/10 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Python 图片处理库exifread详解
2021/02/25 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
行政经理岗位职责
2013/11/09 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
协议书样本
2014/04/23 职场文书
推荐信模板
2014/05/09 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
保研导师推荐信
2015/03/25 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript