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开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
PHP常用处理静态操作类
2015/04/03 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
php socket通信简单实现
2016/11/18 PHP
PHP 无限级分类
2017/05/04 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python实现给微信公众号发送消息的方法
2017/06/30 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
护理个人求职信范文
2014/01/08 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
软件售后服务方案
2014/05/29 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android