当前位置: 首页 > news >正文

uniapp,使用canvas制作一个签名版

先看效果图

 我把这个做成了页面,没有做成组件,因为之前我是配合uview-plus的popup弹出层使用的,这种组件好像是没有生命周期的,第一次打开弹出层可以正常写字,但是关闭之后再打开就不会显示绘制的线条了,还需要重新加载组件的父页面才可以重新写字,所以我又做成了页面,功能就正常了。

代码实现:

<template><view class="page"><canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas><view class="button-group"><button class="one" @click="clear">清空</button><button class="two" @click="finish">确定</button></view></view>
</template><script setup>
import { reactive,onMounted } from "vue";
import {onReachBottom,onShow,onLoad,onReady,onHide} from '@dcloudio/uni-app';import http from '@/common/http.js'import store from '@/store/index.js'import { pathToBase64, base64ToPath } from 'image-tools'let state = store()let props=defineProps({})let emits = defineEmits()let data=reactive({ctx:null, //绘图图像points:[],//路径点集合path:'',flag:false,})onShow(()=>{data.ctx = uni.createCanvasContext("mycanvas",this);   //创建绘图对象//设置画笔样式data.ctx.lineWidth = 4;data.ctx.lineCap = "round"data.ctx.lineJoin = "round"data.flag=false}) //触摸开始,获取到起点function touchstart(e){let startX = e.changedTouches[0].x;let startY = e.changedTouches[0].y;let startPoint = {X:startX,Y:startY};/* **************************************************#由于uni对canvas的实现有所不同,这里需要把起点存起来* **************************************************/data.points.push(startPoint);//每次触摸开始,开启新的路径data.ctx.beginPath();}//触摸移动,获取到路径点function touchmove(e){let moveX = e.changedTouches[0].x;let moveY = e.changedTouches[0].y;let movePoint = {X:moveX,Y:moveY};data.points.push(movePoint);//存点let len = data.points.length;if(len>=2){draw();//绘制路径}}// 触摸结束,将未绘制的点清空防止对后续路径产生干扰function touchend(){    data.points=[];}/* ***********************************************#   绘制笔迹#   1.为保证笔迹实时显示,必须在移动的同时绘制笔迹#   2.为保证笔迹连续,每次从路径集合中区两个点作为起点(moveTo)和终点(lineTo)#   3.将上一次的终点作为下一次绘制的起点(即清除第一个点)************************************************ */function draw() {let point1 = data.points[0]let point2 = data.points[1]data.points.shift()data.ctx.moveTo(point1.X, point1.Y)data.ctx.lineTo(point2.X, point2.Y)data.ctx.stroke()data.ctx.draw(true)data.flag=true}//清空画布function clear(){uni.getSystemInfo({success: function(res) {let canvasw = res.windowWidth;let canvash = res.windowHeight;data.ctx.clearRect(0, 0, canvasw, canvash);data.ctx.draw(false);data.flag=false}})}//完成绘画并保存到本地function finish(){if(!data.flag){http.hint('请签名!')return}// 此API,H5中返回的是base64,APP中返回的是png图片,一个临时路径uni.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {let path = res.tempFilePath;// 因为我是在APP在,所以需要base64,在这里用image-tools插件把png转为base64pathToBase64(path).then(res=>{// 因为之前后端要svg字符串,但是png直接转svg转不了,所以先转为base64,然后在转svg
//                         let svg=`<?xml version="1.0" standalone="no"?>
// <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body_1" width="100%" height="500">// <g transform="matrix(1.3333334 0 0 1.3333334 0 0)">
//     <image  x="0" y="0" xlink:href="${res}" preserveAspectRatio="none" width="100%" height="500" /></g>
// </svg>`              state.svgPath=res// emits('confirm',true)uni.navigateBack({delta:1})}).catch(err=>{console.log('err :>> ', err);})}})}
</script><style scoped lang="less">
.page{overflow: hidden;
}.button-group{position: fixed;left: 50rpx;bottom: 10rpx;display: flex;align-items: center;// justify-content: space-between;// height: 200rpx;.one{width: 200rpx;margin-right: 50rpx;border: 1px solid #123454;}.two{width: 400rpx;background-color: #123454;color: #fff;}}.title{height:50upx;line-height: 50upx;font-size: 16px;}.mycanvas{width: 100%;height: calc(100vh - 200upx);background-color: #ECECEC;}.footer{font-size: 16px;height: 150upx;display: flex;justify-content: space-around;align-items: center;}.left,.right{line-height: 100upx;height: 100upx;width: 250upx;text-align: center;font-weight: bold;color: white;border-radius: 5upx;}.left{background: #007AFF;}.right{background:orange;}
</style>

 在H5中,点击确定后输出为base64,在APP中输出为临时路径的png图片,我是在APP中使用,所以还需要把png图片转为base64,格式按后端要求,如果只需要传图片就不需要转base64了,也可以转svg,转svg的我注释掉了,用到的图片转换插件为image-tools。

如果大家在使用过程中发现了什么问题,欢迎在评论区指正,谢谢观看!

相关文章:

uniapp,使用canvas制作一个签名版

先看效果图 我把这个做成了页面&#xff0c;没有做成组件&#xff0c;因为之前我是配合uview-plus的popup弹出层使用的&#xff0c;这种组件好像是没有生命周期的&#xff0c;第一次打开弹出层可以正常写字&#xff0c;但是关闭之后再打开就不会显示绘制的线条了&#xff0c;还…...

【大数据】Flink 详解(五):核心篇 Ⅳ

Flink 详解&#xff08;五&#xff09;&#xff1a;核心篇 Ⅳ 45、Flink 广播机制了解吗&#xff1f; 从图中可以理解 广播 就是一个公共的共享变量&#xff0c;广播变量存于 TaskManager 的内存中&#xff0c;所以广播变量不应该太大&#xff0c;将一个数据集广播后&#xff0…...

设计模式-建造者模式

核心思想 抽取共同的行为&#xff0c;允许使用者指定复杂对象的类型和内容&#xff0c;不需要了解内部的构建细节使用多个简单的行为构建一个复杂的对象&#xff0c;将对象的构建过程和它的表示分离&#xff0c;同样的构建过程可以创建不同的表示 优缺点 优点 使用者不需要知…...

flutter 设置app图标

使用插件 flutter_launcher_icons 在 pubspec.yaml 配置文件中 加入 dev_dependencies dev_dependencies: flutter_launcher_icons: "^0.13.1" 准备好app得 icon 图标 其中icon的名字为icon.png 创建assets文件夹 和子文件夹icon iamge 配置静态资源路径 完整配置…...

守护网络安全:深入了解DDOS攻击防护手段

ddos攻击防护手段有哪些?在数字化快速发展的时代&#xff0c;网络安全问题日益凸显&#xff0c;其中分布式拒绝服务(DDOS)攻击尤为引人关注。这种攻击通过向目标网站或服务器发送大量合法或非法的请求&#xff0c;旨在使目标资源无法正常处理其他用户的请求&#xff0c;从而达…...

计组 | 寻址方式

目录 一、知识点 1.寻址方式什么&#xff1f; 2.根据操作数所在的位置&#xff0c;都有哪些寻址方式&#xff1f; 3.直接寻址 4.立即寻址 5.隐含寻址 6.相对寻址 7.寄存器 8.寄存器-寄存器型&#xff08;RR&#xff09;、寄存器-存储器型&#xff08;RS&#xff09;和…...

matlab工具箱Filter Designer设计butterworth带通滤波器

1、在matlab控制界面输入fdatool; 2、在显示的界面中选择合适的参数&#xff1b;本实验中采样频率是200&#xff0c;低通30hz&#xff0c;高通60hz,点击butterworth滤波器。 3、点击设计滤波器按钮后&#xff0c;在生成的界面点击红框按钮&#xff0c;可生成simulink模型到当前…...

Python学习笔记第六十天(Matplotlib Pyplot)

Python学习笔记第六十天 Matplotlib Pyplot后记 Matplotlib Pyplot Pyplot 是 Matplotlib 的子库&#xff0c;提供了和 MATLAB 类似的绘图 API。 Pyplot 是常用的绘图模块&#xff0c;能很方便让用户绘制 2D 图表。 Pyplot 包含一系列绘图函数的相关函数&#xff0c;每个函数…...

服务器自动备份、打包、传输脚本

备份脚本 #!/bin/bash #author cheng #备份服务器自动打包归档每天的备份文件 Path/backhistory Host$(hostname) Date$(date %F) Dest${Host}_${Date}#创建目录 mkdir -p ${Path}/${Dest}#打包文件到目录 cd / && \#结合autoback.sh脚本&#xff0c;它往那个地方备&a…...

Docker 的数据管理 网络通信

目录 1.管理容器数据的方式 数据卷 数据卷的容器 2.操作命令 3.Docker 镜像的创建 1.管理容器数据的方式 数据卷 可以独立于容器生命周期存储的机制 可提供持久化 数据共享 docker run -v /var/www:/data1 --name web1 -it centos:7 /bin/bash 数据卷的容器 用来提供持久化数…...

目标检测YOLO实战应用案例100讲-基于孤立森林算法的高光谱遥感图像异常目标检测

目录 前言 孤立森林算法的基本理论 2.1 引言 2.2 孤立森林算法的基本思想...

excel中两列数据生成折线图

WPS中excel的两列数据&#xff0c;第一列为x轴&#xff0c;第二列为y轴&#xff0c;生成折线图&#xff0c;并生成拟合函数。 1.选中两列数据&#xff0c;右击选择插入图表&#xff0c;选择XY&#xff08;散点图&#xff09;&#xff0c;生成散点折线图 2.选中图中散点&#x…...

JS加密的域名锁定功能,JShaman支持泛域名

JShaman的域名锁定功能&#xff0c;支持泛域名 JShaman的JS代码混淆加密中&#xff0c;有一项“域名锁定”功能。使用此功能后&#xff0c;代码运行时会检测浏览器地址中的域名信息&#xff0c;如是非指定域名&#xff0c;则不运行&#xff0c;以此防止自己网站的JS代码被复制…...

概率论与数理统计:第七章:参数估计 第八章:假设检验

文章目录 Ch7. 参数估计7.1 点估计1.矩估计2.最大似然估计(1)离散型(2)连续型 7.2 评价估计量优良性的标准(1)无偏性 (无偏估计)(2)有效性(3)一致性 7.3 区间估计1.置信区间、置信度2.求μ的置信区间 Ch8. 假设检验1.拒绝域α、接受域1-α、H₀原假设、H₁备择假设2.双边检验、…...

【Kubernetes】Kubernetes的监控工具Promethues

Prometheus 一、Prometheus 概念1. Prometheus 概述2. Prometheus 的监控数据3. Prometheus 的特点4. Prometheus 和 zabbix 区别5. Prometheus 的生态组件5.1 Prometheus server5.2 Client Library5.3 Exporters5.4 Service Discovery5.5 Alertmanager5.6 Pushgateway5.7 Graf…...

【linux】2 Linux编译器-gcc/g++和Linux调试器-gdb

文章目录 一、Linux编译器-gcc/g使用1.1 背景知识1.2 gcc如何完成1.3 函数库1.4 gcc选项 二、linux调试器-gdb使用2.1 背景2.2 开始使用 总结 ヾ(๑╹◡╹)&#xff89;" 人总要为过去的懒惰而付出代价ヾ(๑╹◡╹)&#xff89;" 一、Linux编译器-gcc/g使用 1.1 背景…...

【力扣每日一题】2023.8.17 切披萨的方案数

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一个二维数组来表示一个披萨&#xff0c;其中‘A’表示披萨上的苹果。 让我们切k-1刀&#xff0c;把披萨切成 k 份&#xff0…...

Linux调试器-gdb使用

1. 背景 程序的发布方式有两种&#xff0c; debug 模式和 release 模式 Linux gcc/g 出来的二进制程序&#xff0c;默认是 release 模式 要使用 gdb 调试&#xff0c;必须在源代码生成二进制程序的时候 , 加上 - g 选项 2. 开始使用 gdb binFile 退出&#xff1a; ct…...

linux安装mysql错误处理

linux下mysql的安装与使用 linux安装mysql可有三种方式&#xff1a; 1、yum安装 2、源码安装 3、glibc安装 安装wget yum install -y wget https://blog.csdn.net/darendu/article/details/89874564?utm_sourceapp Linux上error while loading shared libraries问题解决方法…...

Matlab绘制灰度直方图

直方图是根据灰图像绘制的&#xff0c;而不是彩色图像通。查看图像直方图时候&#xff0c;需要先确定图片是否为灰度图&#xff0c;使用MATLAB2019查看图片是否是灰度图片&#xff0c;在读取图片后在MATLAB界面的工作区会显示读取的图像矩阵&#xff0c;如果是&#xff0c;那么…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...