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

2024-10-24 13:36:09

功能

兼容 PC 和 Mobile；
画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）；
自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；
支持裁剪（针对需求：有的签字需要裁剪掉四周空白）。
导出图片格式为 base64 ；
示例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 手写电子签名内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue移动端使用canvas签名的实现

效果 canvas画板移动端 .gif 需求在一些项目业务中,经常会使用到画板,让用户自己去写/画一些东西做标示,比如说在线签电子合约.签名等,如果不用插件,那么如何使用h5的canvas画布来实现这一需求呢? [本篇只讨论移动端,PC端请看上篇] 分析很明显,我们需要一个canvas,关于canvas的一些基本操作可以在w3school或者别的一些平台上熟悉一下,其实本例也是基础操作.本案例在vue中完成.(脱离vue也一样.) 首先,需要一个canvas画布其次,考虑逻辑把逻
详解Vue开发微信H5微信分享签名失败问题解决方案

关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常.在安卓上一切正常. 但是!!!在IOS上反复报签名错误. 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话不多说上图!!!! 我的代码: 需求描述:需要从首页进入活动详情页,然后在详情页分享详情页面内容.
VUE解决微信签名及SPA微信invalid signature问题(完美处理)

前端小菜鸟,因为项目要对接微信的jssdk,对接就需要签名认证,但是无奈安卓和IOS各有各的坑,本篇文章只讨论签名,和一个分享的坑,希望大家有所收获,能够解决问题,如果解决不到,请麻烦在评论区留言,本文综合了所有的回答,才调试出来坑需求: 使用微信的功能原因: 1. 项目基于vue,在微信上的web应用 2. 要使用上传功能(不同系统的兼容真的很多BUG,最后只能使用微信方案),支付功能,定位.... 3. 签名一直存在bug和问题,那么后面的功能都会唤不起(偶尔也可以) 签名 1. 流程详
vue+element加入签名效果（移动端可用）

下面介绍为了方便就把项目的文件叫作父组件,然后签名的那个组件叫作子组件 ! 如有不太明白的地方,多看看代码注释.为细节地方 1. 首先根据element ui 在父组件中设置好diglog弹框,并且在全局样式下,自定义样式 <div class="canva" @click="centerDialogVisible = true"> // click绑定的方法是element提供的 centerDialogVisibe=true 是点击时弹框出现 <
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

背景手机型号: 型号:iphone 7 / iphone xs max 版本:ios 10.3.1 / ios 12.1 微信版本:WeChat 6.7.3 问题还原: Vue应用(vue-router)上使用history模式,在某个页面内调用微信JSSDK相关API,如扫码.分享等,使用当前页面URL总会出现签名错误(invalid signature),导致API调用失败. 问题根源 Vue-Router进行路由切换的时候,总是会操作浏览器的历史记录,从而响应页面URL变化. 在JSSD
使用vue实现一个电子签名组件的示例代码

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名.今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件想必不会被吐槽了吧~ canvas <canvas> 标签是 HTML 5 中的新标签. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. canvas标签本身是没有绘图能力的,所有的绘制工作必须
vue 使用 canvas 实现手写电子签名

功能兼容 PC 和 Mobile: 画布自适应屏幕大小变化(窗口缩放.屏幕旋转时画布无需重置,自动校正坐标偏移): 自定义画布尺寸(导出图尺寸),画笔粗细.颜色,画布背景色: 支持裁剪 (针对需求:有的签字需要裁剪掉四周空白). 导出图片格式为 base64 : 示例demo 安装 npm install vue-esign --save 使用 main.js 中引入 import vueEsign from 'vue-esign' Vue.use(vueEsign) 页面中使用必须设置 r
微信小程序canvas实现手写签名

本文实例为大家分享了微信小程序canvas实现手写签名的具体代码,供大家参考,具体内容如下很多时候,程序中需要用到签名的功能,附上源码(微信小程序) .wxml <view class="canvasBox"> <view class="canvasTitle">请签名:</view> <view class="canvasContent"> <vie
基于canvas实现手写签名（vue）

最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣.就自己基于vue写了一个简易的手写签名demo. 其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstart和touchmove事件进行监听.当监听touchstart事件被触发时,我们开始触发canvas里的beginPath事件并且设置moveTo原始点.当监听touchmove事件则去不断去触发lineTo事件,最后stroke(). demo里还有清除签名和保存签名的功能,分别对应了clearR
vue用Object.defineProperty手写一个简单的双向绑定的示例

前言上次写了一个Object.defineProperty() 不详解,文末说要写用它来写个双向绑定.说话算话,说来就来前文链接 Object.defineProperty() 不详解先看最后效果 model演示.gif 什么是双向绑定? 1.当一个对象(或变量)的属性改变,那么调用这个属性的地方显示也应该改变,模型到视图(model => view) 2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也会改为最新的值 ,即视图到模型(view =>
Vue使用sign-canvas实现在线手写签名的实例

目录更新日志安装全局方式局部方式效果图: sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端. 更新日志 v1.1.4 功能更新:增加全屏手写方案,可以通过 options.isFullScreen,和 options.isFullCover 属性控制,全屏模式下 canvasWidth 和 canvasHeight 属性设置无效,感谢网友 AFelicity”的建议与反馈. v1.1.3 功能更新:增加高倍
vue+canvas实现移动端手写签名

本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码,供大家参考,具体内容如下 <template> <div class="sign"> <div class="header"> <i class="el-icon-arrow-left backImg" @click="goBack"></i> <span class="title&
vue使用canvas实现移动端手写签名

基于vue使用canvas实现移动端手写签名! 之前自己开发有这么一个需求,需要实现手写签名,然后以图片的形式保存生成图片的base64数据流 .自己在网上找了一堆,都不是很完美.然后参考网上的加自己的优化和修改做了一版.希望有需要的朋友可以拿来直接用. HTML部分: <template> <div class="hello" > <div>请输入您的签名7:</div> <canvas id="canvas"
一个手写的vue放大镜效果

组件使用less,请确保已安装loader 本组件为放大镜组件,传参列表为: •width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍 •picList:必传,传入图片列表使用示例: script: import mirror from 'xx/mirror' export default { components:{ mirror }, data(){ return { width:300, picList:[ xxxxxx, xxxxxx ], } } } html:
基于vue手写tree插件的那点事儿

前言 Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示.因为大数据全部展示出来对于用户来说是不友好的.今天我们自己手写一个Tree插件. iview提供的控件 iview已经很成熟了,如果说我写的控件和iview提供的控件谁更好,那肯定是选择iview , 手写控件只是为了更好的了解vue父子组件之间的通信的. 请读者还是不要拿我的控件和iview或者其他第三方的去对比.下面我们先来看看iview的Tree控件如何使用 <template> <Tree :da
Vue Router的手写实现方法实现

为什么需要前端路由在前后端分离的现在,大部分应用的展示方式都变成了 SPA(单页面应用 Single Page Application)的模式.为什么会选择 SPA 呢?原因在于: 用户的所有操作都在同一个页面下进行,不进行页面的跳转.用户体验好. 对比多页面,单页面不需要多次向服务器请求加载页面(只请求一次.html文件),只需要向服务器请求数据(多亏了 ajax).因此,浏览器不需要渲染整个页面.用户体验好. 归根结底,还是因为 SPA 能够提供更好的用户体验. 为了更好地实现 SPA,前

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

相关推荐

随机推荐