vue使用canvas实现手写电子签名；vue使用vue-esign插件实现手写电子签名；H5使用画布签名

功能：
1.兼容 PC 和 Mobile；
2.画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）；
3.自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；
4.支持裁剪（针对需求：有的签字需要裁剪掉四周空白）。
5.导出图片格式为 base64；
6.原博地址,本文在原博基础修改，代码在博尾。

签名效果：

一、安装插件

npm install vue-esign --save

二、在.vue页面引入使用

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

三、注意事项

1.必须设置 ref ，用来调用组件的两个内置方法，清空画布 reset() 和导出图片generate()
2.画布默认是宽高800*300，且宽度是不会超过父元素的宽度的

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

四、以下代码可直接复制（有效的话点赞支持一波吧）

<template><div style="margintop:30px;"><div><div style="margin-bottom:20px;"><span>画笔粗细：</span><el-select style="width:100px;" v-model="lineWidth" placeholder="请选择"><el-option :label="1" :value="1"></el-option><el-option :label="3" :value="3"></el-option><el-option :label="6" :value="6"></el-option></el-select><span>画笔颜色：</span><!-- input颜色回显必须要六位的颜色值 --><input v-model="lineColor" type="color" placeholder="" placeholder-class="input-placeholder" /><span>画布背景：</span><input v-model="bgColor" type="color" placeholder="" placeholder-class="input-placeholder" /><span>是否裁剪：</span><input v-model="isCrop" type="checkbox" name=""></div><vue-esign style="border: 1px solid #ddd;" ref="esign" :width="canWidth" :height="canHeight" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" :isClearBgColor="isClearBgColor" /><button @click="handleReset">清空画板</button><button @click="handleGenerate">生成图片</button></div><div><img style="float:left;" :src="resultImg" alt=""></div></div>
</template><script>
import Vue from "vue"
import vueEsign from 'vue-esign'
Vue.use(vueEsign)export default {data () {return {canWidth: 800,//画布宽度--是不会超出父元素的宽度的--设置也不行canHeight: 300,lineWidth: 3,//画笔粗细lineColor: '#000000',//画笔颜色bgColor: '#ffffff',//画布背景isCrop: false,//是否裁剪isClearBgColor: true,//是否清空背景色resultImg: '',//生成签名图片-base64}},methods: {handleReset () {// console.log(this.$refs.esign.$el)// console.log(this.$refs.esign)this.$refs.esign.reset()//清空画布内容this.lineWidth = 3this.lineColor = '#000000'this.bgColor = '#ffffff'this.isCrop = falsethis.resultImg = ''},handleGenerate () {this.$refs.esign.generate().then(res => {console.log('图片的base64地址', res)console.log(this.$refs.esign)this.resultImg = res}).catch(err => {console.log('画布没有签字时', err)alert('请先完成签字！') // 画布没有签字时会执行这里 'Not Signned'})}}}
</script><style>
</style>

vue使用canvas实现手写电子签名；vue使用vue-esign插件实现手写电子签名；H5使用画布签名相关推荐

推荐自己写的 PicGo 聚合图床插件及 Markdown 写文章图像解决方案
前言之前就装了 PicGo ,这是一个各种图床.OSS 甚至 GitHub 的图片托管一站式管理的软件(即一键上传图片).今年年初我上网找了各种图床,最后敲定聚合图床 ,买了基础版会员(100 元 ...
vue纯手写思维导图，拒绝插件(cv即用)
vue纯手写思维导图,拒绝插件(cv即用) 已完成功能点:折叠.放大.缩小.移动后续增加功能点:添加.删除先看结果: 有这么个需求,按照层级关系,把表格放在思维导图上,我第一时间想到用插件,但是找 ...
vue如何使用原生js写动画效果_手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验...
先来看效果图完整源码在 github 中欢迎 star: 准备开始之前您需要有 vue 基础,以及安装好 vue-cli 开始新建 vue 项目:vue init webpack vuexle ...
手摸手，带你用vue撸后台系列一（基础篇） - 掘金
完整项目地址:vue-element-admin 系列文章: 手摸手,带你用 vue 撸后台系列一(基础篇) 手摸手,带你用 vue 撸后台系列二(登录权限篇) 手摸手,带你用 vue 撸后台系 ...
iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
vue基础1--脚手架的使用与vue基础指令
脚手架的使用与vue基础指令安装 vue-devtools 安装vscode插件 1. Vue基本概念 1.1 Vue是什么 1.2 Vue学习的方式 2. @vue/cli脚手架 2.1 @vue ...
前端开发：如何写一手漂亮的 Vue
前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:"90后,你的中年危机已经杀到".这令我很受触动.显然,这有些夸张了,但就目前这日复一日的庸碌下去,眨眼的功夫,那情 ...
vue中canvas签名
vue用canvas横屏签名最近遇到一个签名需求由于canvas一些特性,横屏签名不好控制,也是多方借鉴才解决,写真就是为了记录下,方便有需要的同学. js代码如下: import Draw fro ...
Vue中的var that=this；是啥意思？为什么要这样写？
Vue中的var that=this:是啥意思?为什么要这样写? 初学vue,记录一个思考内容. 文章目录 Vue中的var that=this:是啥意思?为什么要这样写? var that=this ...

vue使用canvas实现手写电子签名；vue使用vue-esign插件实现手写电子签名；H5使用画布签名

一、安装插件

二、在.vue页面引入使用

三、注意事项

四、以下代码可直接复制（有效的话点赞支持一波吧）

vue使用canvas实现手写电子签名；vue使用vue-esign插件实现手写电子签名；H5使用画布签名相关推荐

最新文章

热门文章