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 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
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
PHP生成Flash动画的实现代码
2010/03/12 PHP
PHP关联链接常用代码
2012/11/05 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
javascript引用对象的方法
2007/01/11 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
详解Python中for循环的使用方法
2015/05/14 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Python中如何引入第三方模块
2020/05/27 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
AJAX的全称是什么
2012/11/06 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
个人自荐材料
2014/05/23 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS