使用vue实现手写签名功能

2024-08-24 20:51:56

个人实现截图：

安装：

npm install vue-esign --save

使用：

1.在main.js中引入

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

2.在页面中引用

<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>

3.说明

属性	类型	默认值	说明
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	是否裁剪，在画布设定尺寸基础上裁掉四周空白部分

期待已久,上原码:

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 // 得到了签字生成的base64图片
    }).catch(err => { //  没有签名，点击生成图片时调用
      this.$message({
        message: err + ' 未签名！',
        type: 'warning'
      })
      alert(err) // 画布没有签字时会执行这里 'Not Signned'
    })
  }
}

附：将base64转化成图片方法：

// 将base64，转换成图片

base64ImgtoFile(dataurl, filename = 'file') {

const arr = dataurl.split(',')

const mime = arr[0].match(/:(.*?);/)[1]

const suffix = mime.split('/')[1]

const bstr = atob(arr[1])

let n = bstr.length

const u8arr = new Uint8Array(n)

while (n--) {

u8arr[n] = bstr.charCodeAt(n)

}

return new File([u8arr], `${filename}.${suffix}`, {

type: mime

})

},

到此这篇关于使用vue实现手写签名功能的文章就介绍到这了,更多相关vue实现手写签名内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

基于canvas实现手写签名（vue）

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

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

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

个人实现截图: 安装: npm install vue-esign --save 使用: 1.在main.js中引入 import vueEsign from 'vue-esign' Vue.use(vueEsign) 2.在页面中引用 <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidt
android实现手写签名功能

本文实例为大家分享了android手写签名展示的具体代码,供大家参考,具体内容如下代码简单,就不发demo了,直接贴代码 package com.xx; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android
Vue使用sign-canvas实现在线手写签名的实例

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

GIF压缩有问题,运行很顺滑!!! 1.自定义View--支持设置画笔颜色,画笔宽度,画板颜色,清除画板,检查是否有签名,保存画板图片(复制粘贴可直接使用) /** * Created by YyyyQ on 2020/3/5. * 电子签名 */ public class SignatureView extends View { private Context context; //X轴起点 private float x; //Y轴起点 private float y; //画笔 priva
Android实现手写签名

本文实例为大家分享了Android手写签名的实现方法,产品要求用户可以在app上签协议..所以得弄个手写签名版,参考了一些资料自己写了个PaintView去继承View,实现签名功能. package com.****.*****.widget; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color;
微信小程序实现手写签名(签字版)

本文实例为大家分享了微信小程序实现手写签名的具体代码,供大家参考,具体内容如下公司近期有个需要用户签名的功能,就用小程序canvas写了个 wxml <view class="sign"> <view class="paper"> <canvas class="handWriting" disable-scroll="true" bindtouchstart="touchs
微信小程序canvas实现手写签名

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

使用vue实现手写签名功能

相关推荐

随机推荐