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 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
node中的密码安全(加密)
Sep 17 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
JavaScript实现两个数组的交集
Mar 25 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
PHP 加密与解密的斗争
2009/04/17 PHP
PHP 身份证号验证函数
2009/05/07 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP URL路由类实例
2013/11/12 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
js实现DIV的一些简单控制
2007/06/04 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
乐观大学生的自我评价
2014/01/10 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
奉献家乡演讲稿
2014/09/16 职场文书