uni-app canvas 签名

在这里插入图片描述
调用方法

import Signature from "@/components/signature.vue"
const base64Img = ref()
//监听getSignImg
uni.$on('getSignImg', ({ base64, path }) => {base64Img.value = base64//console.log('签名base64, path ====>', base64, path) //拿到的图片数据// 之后取消监听，防止重复监听uni.$off('getSignImg')})

<Signature :showMark="false"  @cancle="cancle"></Signature>

signature.vue

<template><view class="sign-page" v-cloak><view class="dis-flex justify-end"><uv-icon name="close" color="#333" size="48rpx" @click="cancle"></uv-icon></view><view class="sign-body"><canvas id="signCanvas" canvas-id="signCanvas" class="sign-canvas" disable-scroll@touchstart.stop="signCanvasStart" @touchmove.stop="signCanvasMove"@touchend.stop="signCanvasEnd"></canvas><!-- #ifndef APP --><!--用于临时储存横屏图片的canvas容器，H5和小程序需要--><canvas v-if="horizontal" id="hsignCanvas" canvas-id="hsignCanvas"style="position: absolute; top: -1000px; z-index: -1":style="{ width: canvasHeight + 'px', height: canvasWidth + 'px' }"></canvas><!-- #endif --></view><view class="sign-footer" :class="[horizontal ? 'horizontal-btns' : 'vertical-btns']"><uv-buttoncustomStyle="margin-top: 20rpx;width:300rpx;height:100rpx;border-radius:20rpx;border:1px solid #3894FF"@click="reset"><uv-icon name="shuaxin" color="#3894FF" size="48rpx" custom-prefix="custom-icon"></uv-icon><text class="txt">重新签字</text></uv-button><uv-button type="primary" text="确定提交" customTextStyle="font-size:36rpx"customStyle="margin-top: 20rpx;width:300rpx;height:100rpx;border-radius:20rpx"@click="confirm"></uv-button></view></view>
</template><script>import {pathToBase64,base64ToPath} from '@/utils/signature.js'export default {name: 'sign',props: {// 背景水印图，优先级大于 bgColorbgImg: {type: String,default: ''},// 背景纯色底色，为空则透明bgColor: {type: String,default: ''},// 是否显示水印showMark: {type: Boolean,default: true},// 水印内容，可多行markText: {type: Array,default: () => {return [] // ['水印1', '水印2']}},// 水印样式markStyle: {type: Object,default: () => {return {fontSize: 12, // 水印字体大小fontFamily: 'microsoft yahei', // 水印字体color: '#cccccc', // 水印字体颜色rotate: 60, // 水印旋转角度step: 2.2 // 步长，部分场景下可通过调节该参数来调整水印间距，建议为1.4-2.6左右}}},// 是否横屏horizontal: {type: Boolean,default: false},// 画笔样式penStyle: {type: Object,default: () => {return {lineWidth: 3, // 画笔线宽 建议1~5color: '#000000' // 画笔颜色}}},// 导出图片配置expFile: {type: Object,default: () => {return {fileType: 'png', // png/jpg (png不可压缩质量，支持透明；jpg可压缩质量，不支持透明)quality: 1 // 范围 0 - 1 (仅jpg支持)}}}},data() {return {canvasCtx: null, // canvascanvasWidth: 0, // canvas宽度canvasWidth: 0, // canvas宽度canvasHeight: 0, // canvas高度x0: 0, // 初始横坐标或上一段touchmove事件中触摸点的横坐标y0: 0, // 初始纵坐标或上一段touchmove事件中触摸点的纵坐标signFlag: false // 签名旗帜}},mounted() {this.$nextTick(() => {this.createCanvas()})},methods: {// 创建canvas实例createCanvas() {this.canvasCtx = uni.createCanvasContext('signCanvas', this)this.canvasCtx.setLineCap('round') // 向线条的每个末端添加圆形线帽// 获取canvas宽高const query = uni.createSelectorQuery().in(this)query.select('.sign-body').boundingClientRect((data) => {this.canvasWidth = data.widththis.canvasHeight = data.height}).exec(async () => {await this.drawBg()this.drawMark(this.markText)})},async drawBg() {if (this.bgImg) {const img = await uni.getImageInfo({src: this.bgImg})this.canvasCtx.drawImage(img.path, 0, 0, this.canvasWidth, this.canvasHeight)} else if (this.bgColor) {// 绘制底色填充，否则为透明this.canvasCtx.setFillStyle(this.bgColor)this.canvasCtx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)}},// 绘制动态水印drawMark(textArray) {if (!this.showMark) {this.canvasCtx.draw()return}// 绘制背景this.drawBg()// 水印参数const markStyle = Object.assign({fontSize: 12, // 水印字体大小fontFamily: 'microsoft yahei', // 水印字体color: '#cccccc', // 水印字体颜色rotate: 60, // 水印旋转角度step: 2 // 步长，部分场景下可通过调节该参数来调整水印间距，建议为1.4-2.6左右},this.markStyle)this.canvasCtx.font = `${markStyle.fontSize}px ${markStyle.fontFamily}`this.canvasCtx.fillStyle = markStyle.color// 文字坐标const maxPx = Math.max(this.canvasWidth / 2, this.canvasHeight / 2)const stepPx = Math.floor(maxPx / markStyle.step)let arrayX = [0] // 初始水印位置 canvas坐标 0 0 点while (arrayX[arrayX.length - 1] < maxPx / 2) {arrayX.push(arrayX[arrayX.length - 1] + stepPx)}arrayX.push(...arrayX.slice(1, arrayX.length).map((item) => {return -item}))for (let i = 0; i < arrayX.length; i++) {for (let j = 0; j < arrayX.length; j++) {this.canvasCtx.save()this.canvasCtx.translate(this.canvasWidth / 2, this.canvasHeight / 2) // 画布旋转原点 移到 图片中心this.canvasCtx.rotate(Math.PI * (markStyle.rotate / 180))textArray.forEach((item, index) => {let offsetY = markStyle.fontSize * indexthis.canvasCtx.fillText(item, arrayX[i], arrayX[j] + offsetY)})this.canvasCtx.restore()}}this.canvasCtx.draw()},cancle() {//取消按钮事件this.$emit('cancle')this.reset()//uni.navigateBack()},async reset() {this.$emit('reset')this.signFlag = falsethis.canvasCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)await this.drawBg()this.drawMark(this.markText)},async confirm() {this.$emit('confirm')// 确认按钮事件if (!this.signFlag) {uni.showToast({title: '请签名后再点击确定',icon: 'none',duration: 2000})return}uni.showModal({title: '确认',content: '确认签名无误吗',showCancel: true,success: async ({confirm}) => {if (confirm) {let tempFileif (this.horizontal) {tempFile = await this.saveHorizontalCanvas()} else {tempFile = await this.saveCanvas()}const base64 = await pathToBase64(tempFile)const path = await base64ToPath(base64)uni.$emit('getSignImg', {base64,path})//uni.navigateBack()}}})},signCanvasEnd(e) {// 签名抬起事件// console.log(e, 'signCanvasEnd')this.x0 = 0this.y0 = 0},signCanvasMove(e) {// 签名滑动事件// console.log(e, 'signCanvasMove')// #ifdef MP-WEIXINlet dx = e.touches[0].clientX - this.x0let dy = e.touches[0].clientY - this.y0// #endif// #ifndef MP-WEIXINlet dx = e.touches[0].x - this.x0let dy = e.touches[0].y - this.y0// #endifthis.canvasCtx.moveTo(this.x0, this.y0)this.canvasCtx.lineTo(this.x0 + dx, this.y0 + dy)this.canvasCtx.setLineWidth(this.penStyle?.lineWidth || 4)this.canvasCtx.strokeStyle = this.penStyle?.color || '#000000'this.canvasCtx.stroke()this.canvasCtx.draw(true)// #ifdef MP-WEIXINthis.x0 = e.touches[0].clientXthis.y0 = e.touches[0].clientY// #endif// #ifndef MP-WEIXINthis.x0 = e.touches[0].xthis.y0 = e.touches[0].y// #endif},signCanvasStart(e) {// 签名按下事件 app获取的e不一样区分小程序app// console.log('signCanvasStart', e)if (!this.signFlag) {// 导出第一次开始触碰事件this.$emit('firstTouchStart')}this.signFlag = true// #ifdef MP-WEIXINthis.x0 = e.touches[0].clientXthis.y0 = e.touches[0].clientY// #endif// #ifndef MP-WEIXINthis.x0 = e.touches[0].xthis.y0 = e.touches[0].y// #endif},// 保存竖屏图片async saveCanvas() {return await new Promise((resolve, reject) => {uni.canvasToTempFilePath({canvasId: 'signCanvas',fileType: this.expFile.fileType, // 只支持png和jpgquality: this.expFile.quality, // 范围 0 - 1success: (res) => {if (!res.tempFilePath) {uni.showModal({title: '提示',content: '保存签名失败',showCancel: false})return}resolve(res.tempFilePath)},fail: (r) => {console.log('图片生成失败：' + r)resolve(false)}},this)})},// 保存横屏图片async saveHorizontalCanvas() {return await new Promise((resolve, reject) => {uni.canvasToTempFilePath({canvasId: 'signCanvas',fileType: this.expFile.fileType, // 只支持png和jpgsuccess: (res) => {if (!res.tempFilePath) {uni.showModal({title: '提示',content: '保存签名失败',showCancel: false})return}// #ifdef APPuni.compressImage({src: res.tempFilePath,quality: this.expFile.quality * 100, // 范围 0 - 100rotate: 270,success: (r) => {console.log('==== compressImage :', r)resolve(r.tempFilePath)}})// #endif// #ifndef APPuni.getImageInfo({src: res.tempFilePath,success: (r) => {// console.log('==== getImageInfo :', r)// 将signCanvas的内容复制到hsignCanvas中const hcanvasCtx = uni.createCanvasContext('hsignCanvas', this)// 横屏宽高互换hcanvasCtx.translate(this.canvasHeight / 2, this.canvasWidth / 2)hcanvasCtx.rotate(Math.PI * (-90 / 180))hcanvasCtx.drawImage(r.path,-this.canvasWidth / 2,-this.canvasHeight / 2,this.canvasWidth,this.canvasHeight)hcanvasCtx.draw(false, async () => {const hpathRes = await uni.canvasToTempFilePath({canvasId: 'hsignCanvas',fileType: this.expFile.fileType, // 只支持png和jpgquality: this.expFile.quality // 范围 0 - 1},this)let tempFile = ''if (Array.isArray(hpathRes)) {hpathRes.some((item) => {if (item) {tempFile = item.tempFilePathreturn}})} else {tempFile = hpathRes.tempFilePath}resolve(tempFile)})}})// #endif},fail: (err) => {console.log('图片生成失败：' + err)resolve(false)}},this)})}}}
</script><style scoped lang="scss">[v-cloak] {display: none !important;}.sign-page {height: 600rpx;width: 710rpx;padding: 20rpx;display: flex;flex-direction: column;.sign-body {margin-top: 50rpx;width: 100%;flex-grow: 1;background: #E5E5E5;.sign-canvas {width: 100%;height: 100%;}}.sign-footer {width: 100%;height: 80rpx;margin: 15rpx 0;display: flex;justify-content: space-evenly;align-items: center;.txt{color:#3894FF;padding-left:10rpx;font-size: 36rpx;}}.vertical-btns {.btn {width: 120rpx;height: 66rpx;}}.horizontal-btns {.btn {width: 66rpx;height: 120rpx;writing-mode: vertical-lr;transform: rotate(90deg);}}}:deep(.uvicon-close) {font-size: 48rpx}
</style>

signature.js

function getLocalFilePath(path) {if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {return path}if (path.indexOf('file://') === 0) {return path}if (path.indexOf('/storage/emulated/0/') === 0) {return path}if (path.indexOf('/') === 0) {var localFilePath = plus.io.convertAbsoluteFileSystem(path)if (localFilePath !== path) {return localFilePath} else {path = path.substr(1)}}return '_www/' + path
}function dataUrlToBase64(str) {var array = str.split(',')return array[array.length - 1]
}var index = 0
function getNewFileId() {return Date.now() + String(index++)
}function biggerThan(v1, v2) {var v1Array = v1.split('.')var v2Array = v2.split('.')var update = falsefor (var index = 0; index < v2Array.length; index++) {var diff = v1Array[index] - v2Array[index]if (diff !== 0) {update = diff > 0break}}return update
}export function pathToBase64(path) {return new Promise(function(resolve, reject) {if (typeof window === 'object' && 'document' in window) {if (typeof FileReader === 'function') {var xhr = new XMLHttpRequest()xhr.open('GET', path, true)xhr.responseType = 'blob'xhr.onload = function() {if (this.status === 200) {let fileReader = new FileReader()fileReader.onload = function(e) {resolve(e.target.result)}fileReader.onerror = rejectfileReader.readAsDataURL(this.response)}}xhr.onerror = rejectxhr.send()return}var canvas = document.createElement('canvas')var c2x = canvas.getContext('2d')var img = new Imageimg.onload = function() {canvas.width = img.widthcanvas.height = img.heightc2x.drawImage(img, 0, 0)resolve(canvas.toDataURL())canvas.height = canvas.width = 0}img.onerror = rejectimg.src = pathreturn}if (typeof plus === 'object') {plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {entry.file(function(file) {var fileReader = new plus.io.FileReader()fileReader.onload = function(data) {resolve(data.target.result)}fileReader.onerror = function(error) {reject(error)}fileReader.readAsDataURL(file)}, function(error) {reject(error)})}, function(error) {reject(error)})return}if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {wx.getFileSystemManager().readFile({filePath: path,encoding: 'base64',success: function(res) {resolve('data:image/png;base64,' + res.data)},fail: function(error) {reject(error)}})return}reject(new Error('not support'))})
}export function base64ToPath(base64) {return new Promise(function(resolve, reject) {if (typeof window === 'object' && 'document' in window) {base64 = base64.split(',')var type = base64[0].match(/:(.*?);/)[1]var str = atob(base64[1])var n = str.lengthvar array = new Uint8Array(n)while (n--) {array[n] = str.charCodeAt(n)}return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))}var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)if (extName) {extName = extName[1]} else {reject(new Error('base64 error'))}var fileName = getNewFileId() + '.' + extNameif (typeof plus === 'object') {var basePath = '_doc'var dirPath = 'uniapp_temp'var filePath = basePath + '/' + dirPath + '/' + fileNameif (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {plus.io.resolveLocalFileSystemURL(basePath, function(entry) {entry.getDirectory(dirPath, {create: true,exclusive: false,}, function(entry) {entry.getFile(fileName, {create: true,exclusive: false,}, function(entry) {entry.createWriter(function(writer) {writer.onwrite = function() {resolve(filePath)}writer.onerror = rejectwriter.seek(0)writer.writeAsBinary(dataUrlToBase64(base64))}, reject)}, reject)}, reject)}, reject)return}var bitmap = new plus.nativeObj.Bitmap(fileName)bitmap.loadBase64Data(base64, function() {bitmap.save(filePath, {}, function() {bitmap.clear()resolve(filePath)}, function(error) {bitmap.clear()reject(error)})}, function(error) {bitmap.clear()reject(error)})return}if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {var filePath = wx.env.USER_DATA_PATH + '/' + fileNamewx.getFileSystemManager().writeFile({filePath: filePath,data: dataUrlToBase64(base64),encoding: 'base64',success: function() {resolve(filePath)},fail: function(error) {reject(error)}})return}reject(new Error('not support'))})
}