手签

<template><a-modalv-model="showModel":closable="false":maskClosable="false"title="在以下区域内签名"@cancel="onClosePopup"@ok="save"><div><div><canvas class="canvas" id="m-signature-canvas"></canvas></div><div><div class="center"><a-button type="primary" size="small" @click="clear">清除</a-button></div></div></div></a-modal>
</template><script>
/*** 手签组件*/
export default {name: 'Signature',components: {},props: {showPopup: {type: Boolean,default: false,required: true}},data () {return {showModel: false,signaturePad: null,canvas: null}},watch: {showPopup (value, oldValue) {if (value !== oldValue) {this.showModel = valueif (this.showModel && !this.canvas) {this.$nextTick(() => {this.initCanvas()})}}}},created () {this.init()},mounted () {this.initCanvas()},methods: {init () {this.showModel = this.showPopup},initCanvas () {function resizeCanvas () {var ratio = Math.max(window.devicePixelRatio || 1, 1)canvas.width = canvas.offsetWidth * ratiocanvas.height = canvas.offsetHeight * ratiocanvas.getContext('2d').scale(ratio, ratio)}var canvas = document.getElementById('m-signature-canvas')if (canvas) {window.onresize = resizeCanvasresizeCanvas()this.canvas = canvas// eslint-disable-next-line no-undefthis.signaturePad = new SignaturePad(canvas)this.clear()}},clear () {if (this.signaturePad) {this.signaturePad.clear()}},onClosePopup () {this.$emit('onClosePopup')},save () {if (this.signaturePad) {var signaturePad = this.signaturePad// eslint-disable-next-line no-unused-varsvar canvas = this.canvasif (signaturePad.isEmpty()) {this.$toast('请提供签名')} else {var ctx = canvas.getContext('2d')var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).datavar lOffset = canvas.width; var rOffset = 0; var tOffset = canvas.height; var bOffset = 0for (var i = 0; i < canvas.width; i++) {for (var j = 0; j < canvas.height; j++) {var pos = (i + canvas.width * j) * 4if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {bOffset = Math.max(j, bOffset) // 找到有色彩的最底部的纵坐标rOffset = Math.max(i, rOffset) // 找到有色彩的最右端tOffset = Math.min(j, tOffset) // 找到有色彩的最上端lOffset = Math.min(i, lOffset) // 找到有色彩的最左端}}}// 由于循环是从0开始的,而我们认为的行列是从1开始的lOffset++rOffset++tOffset++bOffset++// console.log(lOffset, rOffset, tOffset, bOffset)var oldUrl = signaturePad.toDataURL()var originImage = new Image()originImage.src = oldUrlvar canvas2 = document.createElement('canvas')canvas2.width = rOffset - lOffsetcanvas2.height = bOffset - tOffset// document.body.appendChild(canvas)// 用9参数的drawImage方法对图片进行裁减canvas2.getContext('2d').drawImage(originImage, lOffset, tOffset, rOffset - lOffset, bOffset - tOffset, 0, 0, rOffset - lOffset, bOffset - tOffset)// var newUrl = canvas2.toDataURL();// var newImage = new Image();// newImage.src = newUrl;// window.open(canvas2.toDataURL())canvas2.remove()var result = signaturePad.toDataURL()this.$emit('onPopupConfirm', result)}}}}
}
</script>
<style lang="less" scoped>
.canvas {width:100%;height:80%;background: #666666;
}
.center {text-align: center;
}
</style>