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 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php检测url是否存在的方法
2015/04/14 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
微信小程序实现时间进度条功能
2020/11/17 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
深入讲解Python编程中的字符串
2015/10/14 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python查询mysql,返回json的实例
2018/03/26 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python对XML文件的操作实现代码
2020/03/27 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
外贸员简历中的自我评价
2014/03/04 职场文书
业务员简历自我评价
2014/03/06 职场文书
法人代表证明书
2014/09/18 职场文书
公司租房协议书范本
2014/10/08 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python