vue 使用 canvas 实现手写电子签名


Posted in Javascript onMarch 06, 2020

功能

  1. 兼容 PC 和 Mobile;
  2. 画布自适应屏幕大小变化(窗口缩放、屏幕旋转时画布无需重置,自动校正坐标偏移);
  3. 自定义画布尺寸(导出图尺寸),画笔粗细、颜色,画布背景色;
  4. 支持裁剪 (针对需求:有的签字需要裁剪掉四周空白)。
  5. 导出图片格式为 base64 ;
  6. 示例demo

安装

npm install vue-esign --save

使用

main.js 中引入

import vueEsign from 'vue-esign'
Vue.use(vueEsign)

页面中使用

必须设置 ref ,用来调用组件的两个内置方法 reset() 和 generate() 无需给组件设置 style 的宽高,如果画布的 width 属性值没超出父元素的样式宽度,则该组件的样式宽度就是画布宽度,超出的话,组件样式宽度则是父元素的100%; 所以只需设置好父元素的宽度即可;

<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<button @click="handleReset">清空画板</button> 
<button @click="handleGenerate">生成图片</button>
data () {
 return {
 lineWidth: 6,
 lineColor: '#000000',
 bgColor: '',
 resultImg: '',
 isCrop: false
 }
},
methods: {
 handleReset () {
 this.$refs.esign.reset()
 },
 handleGenerate () {
 this.$refs.esign.generate().then(res => {
 this.resultImg = res
 }).catch(err => {
 alert(err) // 画布没有签字时会执行这里 'Not Signned'
 })
 }
}

说明

属性 类型 默认值 说明
width Number 800 画布宽度,即导出图片的宽度
height Number 300 画布高度,即导出图片的高度
lineWidth 4 Number 画笔粗细
lineColor String #000000 画笔颜色
bgColor String 画布背景色,为空时画布背景透明, 支持多种格式 '#ccc','#E5A1A1','rgb(229, 161, 161)','rgba(0,0,0,.6)','red'
isCrop Boolean false 是否裁剪,在画布设定尺寸基础上裁掉四周空白部分

两个内置方法,通过给组件设置 ref 调用:

清空画布

this.$refs.esign.reset()

生成图片

this.$refs.esign.generate().then(res => {
 console.log(res) // base64图片
}).catch(err => {
 alert(err) // 画布没有签字时会执行这里 'Not Signned'
})

有任何问题请到此提issue

vue 使用 canvas 实现手写电子签名

总结

到此这篇关于vue 使用 canvas 实现手写电子签名的文章就介绍到这了,更多相关vue 手写电子签名内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 #Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 #Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 #Javascript
javascript中可能用得到的全部的排序算法
Mar 05 #Javascript
js的Object.assign用法示例分析
Mar 05 #Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 #Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 #Javascript
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
jquery 笔记 事件
2011/11/02 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
决策树的python实现方法
2014/11/18 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
pandas的resample重采样的使用
2020/04/24 Python
500行python代码实现飞机大战
2020/04/24 Python
基于python代码批量处理图片resize
2020/06/04 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
《陶罐和铁罐》教学反思
2014/02/19 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
新年祝酒词大全
2015/08/11 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers