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'))})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/829827.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Levenberg-Marquardt (LM) 算法进行非线性拟合

目录 1. LM算法2. 调包实现3. LM算法实现4. 源码地址 1. LM算法 LM算法是一种非线性最小二乘优化算法&#xff0c;用于求解非线性最小化问题。LM主要用于解决具有误差函数的非线性最小二乘问题&#xff0c;其中误差函数是参数的非线性函数&#xff0c;需要通过调整参数使误差函…

Vue Canvas图片水印的绘制 图片加水印

效果 定义画布 <canvas width"800" height"800" ref"cn" ></canvas>绘制水印 draw(){const img new Image()img.srchttps://img1.baidu.com/it/u3035183739,1826404114&fm253&fmtauto&app138&fJPEGimg.onload(()…

HTML 官网进行移动端和 PC 端适配

使用响应式布局&#xff1a;确保你的 HTML 结构使用了响应式布局&#xff0c;即页面的元素能够根据不同设备的屏幕大小和分辨率进行自适应调整。 媒体查询&#xff1a;在 CSS 中使用媒体查询来针对不同的设备条件应用特定的样式。例如&#xff0c;你可以针对手机、平板和桌面设…

AI生成音乐

生成背景音乐 效果还不错 GitHub - teticio/audio-diffusion: Apply diffusion models using the new Hugging Face diffusers package to synthesize music instead of images.

pyqt 动态更换表头和数据

目录 pyqt 动态更换表头和数据代码 效果图&#xff1a; pyqt 动态更换表头和数据代码 from PyQt5.QtGui import QColor, QBrush from PyQt5.QtWidgets import QApplication, QTableWidget, QVBoxLayout, QWidget, QPushButton, QTableWidgetItemclass Example(QWidget):def _…

C语言例题27:打印99乘法口诀表

打印99乘法口诀表 #include <stdio.h>void main() {int i, j;int result 0;for (i 1; i < 10; i) {for (j 1; j < i; j) {result i * j;printf("%d*%d%d\t", j, i, result);}printf("\n");} } 本章C语言经典例题合集&#xff1a;http://t…

Redis底层数据结构之ZSkipList

目录 一、概述二、ZSkipList结构三、和平衡树和哈希表的对比 redis底层数据结构已完结&#x1f44f;&#x1f44f;&#x1f44f;&#xff1a; ☑️redis底层数据结构之SDS☑️redis底层数据结构之ziplist☑️redis底层数据结构之quicklist☑️redis底层数据结构之Dict☑️redis…

2024.4.28每日一题

LeetCode 负二进制转换 题目链接&#xff1a;1017. 负二进制转换 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个整数 n &#xff0c;以二进制字符串的形式返回该整数的 **负二进制&#xff08;base -2&#xff09;**表示。 **注意&#xff0c;**除非字符串就…

机器学习和深度学习-- 李宏毅(笔记与个人理解)Day22

Day 22 Transformer seqence to seqence 有什么用呢&#xff1f; Encoder how Block work 仔细讲讲Residual 的过程&#xff1f; 重构 Decoder - AutoRegressive Mask 由于是文字接龙&#xff0c;所以无法考虑右边的 info 另一种decoder Encoder to Decoder – Cross Attend…

rk3568 安卓11 修改android id

frameworks\base\packages\SettingsProvider\src\com\android\providers\settings\SettingsProvider.java 系统应用获取的android id String androidId Long.toHexString(new SecureRandom().nextLong());直接写死 String androidId "666666";上层普通应用 // C…

llama3本地部署

目录 II.下载 II.验证ollama安装 II.安装llama3 和启动 II.命令行调用 II.api调用 II.参考文献 II.下载 https://ollama.com/download/windows OllamaSetup.exe https://github.com/meta-llama/llama3 II.验证ollama安装 cmd ollama II.安装llama3 和启动 ollama run …

【问题分析】TaskDisplayArea被隐藏导致的黑屏以及无焦点窗口问题【Android 14】

1 问题描述 用户操作出的偶现的黑屏以及无焦点窗口问题。 直接原因是&#xff0c;TaskDisplayArea被添加了eLayerHidden标志位&#xff0c;导致所有App的窗口不可见&#xff0c;从而出现黑屏和无焦点窗口问题&#xff0c;相关log为&#xff1a; 这个log是MTK添加的&#xff0…

C# Solidworks二次开发:枚举应用实战(第八讲)

大家好&#xff0c;今天还要介绍我们的枚举应用实战系列。 下面是今天要介绍的枚举值&#xff1a; &#xff08;1&#xff09;第一个为swCommands_e&#xff0c;这个枚举的含义为sw工具栏和菜单命令&#xff0c;下面是官方的具体枚举值&#xff1a; MemberDescriptionswComm…

Django模型继承之多表继承

在Django模型继承中&#xff0c;支持的第二种模型继承方式是层次结构中的每个模型都是一个单独的模型。每个模型都指向分离的数据表&#xff0c;并且可以被独立查询和创建。在继承关系中&#xff0c;子类和父类之间通过一个自动创建的OneToOneField进行连接。示例代码如下&…

Redis的应用场景有哪些

0.什么是Redis&#xff1f; 基于内存的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息代理。Redis 支持多种数据结构&#xff0c;包括字符串&#xff08;String&#xff09;、哈希表&#xff08;Hashes&#xff09;、列表&#xff08;Lists&#xff09;、集合&…

C语言入门课程学习笔记-6

C语言入门课程学习笔记-6 第27课 - 字符数组与字符串&#xff08;上&#xff09;第28课 - 字符数组与字符串&#xff08;下&#xff09;第29课 - 数组专题练习&#xff08;上&#xff09;第30课 - 数组专题练习&#xff08;下&#xff09; 本文学习自狄泰软件学院 唐佐林老师的…

不只有 Spring,这四款Java 基础开发框架同样值得关注!

Java 开发不只有 Spring &#xff0c;今天给大家推荐几个同样优秀的 Java 基础开发框架&#xff0c;为日常项目开发提供更多的选择。答应我&#xff0c;请不要再叫我 Spring 小子了&#xff0c;​好吗&#xff1f; 项目概览&#xff1a; Guice&#xff1a;轻量级依赖注入框架 …

2024Mac系统热门游戏排行榜 Mac支持的网络游戏有哪些?mac能玩哪些大型网游 苹果电脑Mac游戏资源推荐 Mac玩Windows游戏

“游戏是这个世界上唯一能和女性争夺男朋友的东西&#xff08;/滑稽&#xff0c;有不少女生也喜欢玩游戏&#xff09;。” 虽然只是一句玩笑话&#xff0c;不过也可以看出游戏对大多数男生来说是必不可少的一项娱乐活动了。而网络游戏是游戏中的一大分支&#xff0c;能让玩家们…

科技“冷”战:NIST刷新制冷效率,中国实力逆境崛起!

4月23日&#xff0c;美国国家标准与技术研究院&#xff08;NIST&#xff09;的研究人员报道称&#xff0c;他们通过对常用于科研和工业领域的制冷机进行改装&#xff0c;显著降低了将材料冷却至略高于绝对零度所需的时间和能量。 科学家们指出&#xff0c;他们的原型设备每年能…

Linux 学习之路 -- 进程篇 -- 进程控制

目录 一、进程终止 <1>使用语言和系统自带的方法&#xff0c;进行转换 <2>自定义错误码 <3>小结&#xff1a; <2>两个接口exit / _exit 二、进程等待 <1>简单了解 <2>wait调用 <3>waitpid调用 <4>status <1>W…