vue signature 电子签名

只修改3视图文件
文件夹位置放的相同就不用改相对地址

npm install vue-signature-simple
文件名index.js 与main.js同级

import VueSignature from './src/components/vue-signature'if (typeof window !== 'undefined' && window.Vue) {window.Vue.component('vue-signature', VueSignature)
}VueSignature.install = function (Vue) {Vue.component(VueSignature.name, VueSignature)
}export default VueSignature

视图文件 layout .vue

<template><div class="home"><div class="container"><div class="section-1"><div class="row"><div class="col"><vue-signatureref="s1":width="width":height="height":stroke-size="strokeSize":stroke-color="strokeColor"/><ul class="colors"><liclass="color":style="{ background: item }"@click="changeColor(item)"v-for="item in colors":key="item":class="{ active: strokeColor === item }"></li></ul></div><!-- 图片 --><div class="col"><img :src="signature" alt="signature" v-if="signature" class="signature"><div class="signature" :style="{ width: (parseInt(width) + 2) + 'px', height: (parseInt(height) + 2) + 'px' }" v-else></div></div></div><div class="btns"><button @click="deleteImg">clear</button><button @click="getSignature">get signature</button></div></div></div></div>
</template><script>
import VueSignature from '../../index'
export default {name: 'App',components: {VueSignature},data () {return {signature: '',strokeColor: '#000',strokeSize: 2,width: 400,height: 150}},methods: {getSignature () {this.signature = this.$refs.s1.getSignature()},deleteImg () {this.$refs.s1.clear()this.signature = ''}}
}
</script><style lang="scss">
</style>

components内添加 vue-signature.vue 文件
文件内容

<template><div class="vue-signature" :style="{ width: width + 'px', height: height + 'px' }"><canvas:id="id":width="width":height="height"@mousedown.prevent="mouseDown"@mouseup.prevent="mouseUp"@mouseout.prevent="mouseUp"@mousemove.prevent="mouseMove"@touchstart.prevent="mouseDown"@touchmove.prevent="mouseMove"@touchend.prevent="mouseUp"@touchcancel.prevent="mouseUp">Your browser doesn't support canvas</canvas></div>
</template><script>
/*** random string* @param num string length* @returns {string}*/
function randomString (num) {const str = '82gwp7a9e0tzvsqrjy3kubif6l5cnodxhm41'const arr = str.split('')let randomString = ''for (let i = 0; i < num; i++) {const index = Math.floor(Math.random() * str.length)randomString += arr[index]}return randomString
}export default {name: 'vue-signature',props: {height: {default: 100},width: {default: 300},strokeColor: {default: 'black',type: String},strokeSize: {default: 2}},data () {return {id: 'vue-signature-' + randomString(5),isMouseDown: false,lastLocation: {x: 0,y: 0},log: [],empty: true}},methods: {/*** initialization*/init () {this.canvas = document.getElementById(this.id)this.context = this.canvas.getContext('2d')},/*** Clear canvas*/clear () {this.context.clearRect(0, 0, this.width, this.height)this.empty = true},/*** coordinate transformation* @param x* @param y* @returns {{x: number, y: number}}*/coordinateTransfer (x, y) {const box = this.canvas.getBoundingClientRect()return {x: Math.round(x - box.left),y: Math.round(y - box.top)}},/*** Start writing* @param e*/mouseDown (e) {const clientX = e.clientX || e.changedTouches[0].clientXconst clientY = e.clientY || e.changedTouches[0].clientYthis.isMouseDown = truethis.lastLocation = this.coordinateTransfer(clientX, clientY)},/*** Pause writing* @param e*/mouseUp (e) {this.isMouseDown = false},/*** Writing* @param e*/mouseMove (e) {if (this.isMouseDown) {const clientX = e.clientX || e.changedTouches[0].clientXconst clientY = e.clientY || e.changedTouches[0].clientYconst currentLocation = this.coordinateTransfer(clientX, clientY)const context = this.contextconst lastLocation = this.lastLocation// drawcontext.beginPath()context.moveTo(lastLocation.x, lastLocation.y)context.lineTo(currentLocation.x, currentLocation.y)context.strokeStyle = this.strokeColorcontext.lineWidth = Number(this.strokeSize)context.lineCap = 'round'context.lineJoin = 'round'context.stroke()this.lastLocation = currentLocationthis.empty = false}},/*** Get Base64 data of signature image* @param format* 1. image/png (default)* 2. image/jpeg* 3. image/svg+xml* @returns {string}*/getSignature (format) {format = format || 'image/png'return this.canvas.toDataURL(this.format, 1)},/*** is empty ?* @returns {boolean}*/isEmpty () {return this.empty}},mounted () {this.init()}
}
</script><style lang="scss" scoped>
.vue-signature canvas {display: block;background: #efefef;
}
</style>

vue signature 电子签名相关推荐

vue 实现电子签名功能支持生成图片
start 最近遇到需求,说是要在前端页面,做一个电子签名的功能. 以前番茄玩过不少canvas的demo,这玩意我第一反应就是canvas. 简单记录一下这个功能. github 自己造轮子有点麻烦 ...
密码学哈希函数_哈希函数在密码学中的应用
密码学哈希函数 A Hash Function is a mathematical function that converts a numerical value into another comp ...
[SAP Dictionary]
Words Chinese (foreign) exchange gain 汇兑收益 (foreign) exchange loss 汇兑损失 (investment) support allo ...
关于“量变”和“质变”的圣贤语录与辩证思考
中国圣贤:天下大事必作于细,天下难事必作于易. 合抱之木,生于毫末:九层之台,起于累土:千里之行,始于足下. 不积跬步,无以至千里.不积小流,无以成江海. 夫风生于地,起于青苹之末.风起于青萍之末,浪 ...
vue中使用电子签名
使用vue-cli4脚手架,js-signature 2.0.0(https://www.npmjs.com/package/jq-signature)jquery 3.4.1. 1.安装jq及js- ...
【电子签名手机-vue】
电子签名手机-vue <template><div class="signature" @touchmove.prevent><div class=& ...
VUE解决微信签名,SPA微信invalid signature问题,完美处理
深度解决方案,包教不包会,只因为踩坑无数,希望大家能有所收获前端小菜鸟,因为项目要对接微信的jssdk,对接就需要签名认证,但是无奈安卓和IOS各有各的坑,本篇文章只讨论签名,和一个分享的坑,希望大 ...
Web前后端笔记-vue封装http请求添加signature及后端(Java)解析并验证
首先帖下运行截图: 签名过期情况: 签名错误情况: 这里npm要导入js-md5,并且在main.js中添加 import md5 from 'js-md5' Vue.prototype.$md5 = ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...

vue signature 电子签名

vue signature 电子签名相关推荐

最新文章

热门文章