用uniapp在微信小程序实现画板(电子签名)功能

目录

一、效果展示

二、插件推荐与引入

三、代码具体应用

四、h5端将base64转换为url

一、效果展示

二、插件推荐与引入

手写板、签字板;<zwp-draw-pad /> - DCloud 插件市场

这个在微信小程序引入时内容简单,且涉及的方法很多,可满足撤销、删除、保存、画笔颜色修改等操作。其中保存的图片结果是base64,可借助微信小程序的转换方法将其转换为url临时地址。

三、代码具体应用

	<view class="content"><zwp-draw-pad :width="w" :height="h" ref="drawPad" /><view class="sa" @click="onCancel()">撤销</view><view class="sa" @click="onSave()">保存</view><view class="sa" @click="onClear()">清除</view></view>
<script>
import { base64src } from "../../utils/base64src.js"; // 后面引用路径为base64src.js文件路径export default {data() {return {w: 375,h: 375,}},methods: {onSave() {this.$refs.drawPad.save().then(res => {console.log('保存图片的地址', res.tempFilePath)base64src( res.tempFilePath, (res) => {console.log(res); // 转换后的临时连接路径});})},onCancel() {this.$refs.drawPad.back()},onClear() {this.$refs.drawPad.init()this.$refs.drawPad.clearCache()},}}
</script>

其中通过this.$refs.drawPad.originData.length 是否>0来判断是否在画板上进行了签名

借助工具函数,使用引入即可!

const base64src = (base64data, fun) => {const base64 = base64data; //base64格式图片const time = new Date().getTime();const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";//如果图片字符串不含要清空的前缀,可以不执行下行代码.const imageData = base64.replace(/^data:image\/\w+;base64,/, "");const file = wx.getFileSystemManager();file.writeFileSync(imgPath, imageData, "base64");fun(imgPath);
};
export { base64src };

四、h5端将base64转换为url

			base64ImgtoFile (dataurl, filename = 'file') { const arr = dataurl.split(',')const mime = arr[0].match(/:(.*?);/)[1]const suffix = mime.split('/')[1]const bstr = atob(arr[1])let n = bstr.lengthconst u8arr = new Uint8Array(n)while (n--) { u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], `${ filename}.${ suffix}`, { type: mime})},
let file = this.getBase64ImageUrl(res.tempFilePath) // 得到File对象(res.tempFilePath即为base64形式)
this.imgUrl = window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file) // imgUrl图片网络路径

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

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

相关文章

【C/C++】排序算法代码实现

这里&#xff0c;汇总了常见的排序算法具体代码实现。使用C语言编写。 排序算法实现 插入排序冒泡排序选择排序快速排序希尔排序归并排序 插入排序 #include <stdio.h> #include <stdlib.h>void InsertSort(int arr[],int n){int i,j,temp;for(i 1;i < n;i){ …

Python 异常的传递性

实例 这里就简单用2个function来演示一下异常的传递性 func1 这里num 1/0明显是一个ZeroDivisionError错误&#xff0c;作为演示 def func1():print("fun1 开始执行")num 1 / 0print("func1 结束执行") func2 def func2():print("func2 开始执…

tomcat国密ssl测试

文章目录 程序包准备部署配置访问测试 程序包准备 下载 tomcat8.5 https://www.gmssl.cn/gmssl/index.jsp 下载 tomcat 国密组件及证书 本次测试所有的程序文件均已打包&#xff0c;可以直接 点击下载 部署配置 自行完成 完成centos 的jdk配置。 部署tomcat,将 gmssl4t.jar…

数字孪生农村供水工程平台:为乡村振兴注入新活力

随着科技的不断进步&#xff0c;数字孪生技术逐渐成为各行业创新发展的重要驱动力。在水利领域&#xff0c;数字孪生农村供水平台以其独特的优势&#xff0c;为农村供水系统带来了革命性的变革。本文将为您详细介绍数字孪生农村供水平台的核心特点及优势&#xff0c;带您领略智…

深度学习常见激活函数:ReLU,sigmoid,Tanh,softmax,Leaky ReLU,PReLU,ELU整理集合,应用场景选择

文章目录 1、ReLU 函数&#xff08;隐藏层中是一个常用的默认选择&#xff09;1.1 优点1.2 缺点 2、sigmoid 函数2.1 优点2.2 缺点 3、Tanh 函数3.1 优点3.2 缺点 4、softmax 函数&#xff08;多分类任务最后一层都会使用&#xff09;5、Leaky ReLU 函数5.1 优点5.2 缺点 6、PR…

mongo DB -- aggregate分组查询后字段展示

一、分组查询 在mongoDB中可以使用aggregate中的$group操作对集合中的文档进行分组,但是查询后的数据不显示其他字段,只显示分组字段 aggregate进行分组示例 db.collection.aggregate([{$group: {_id: "$field"}},]) 查询后显示 展开只显示两个字段 二、显示所有字段…

APM工具skywalking部署

一 整体架构 整个架构&#xff0c;分成上、下、左、右四部分&#xff1a; 上部分 Agent &#xff1a;负责从应用中&#xff0c;收集链路信息&#xff0c;发送给 SkyWalking OAP 服务器。目前支持 SkyWalking、Zikpin、Jaeger 等提供的 Tracing 数据信息。而我们目前采用的是&…

SQL基础理论篇(九):存储过程

文章目录 简介存储过程的形式定义一个存储过程使用delimiter定义语句结束符存储过程中的三种参数类型流控制语句 存储过程的优缺点参考文献 简介 存储过程Stored Procedure&#xff0c;SQL中的另一个重要应用。 前面说的视图&#xff0c;只能勉强跟编程中的函数相似&#xff…

小程序订阅消息

wx.requestSubscribeMessage({tmplIds: [2IdqlWrqSbjAurzIuW8imeK-ftS8gbhYdZ0icdE],success(res) {console.log(res);// 处理用户授权结果},fail(err) {console.error(err);// 处理授权请求失败}});

重磅!1区、60年老牌期刊被踢?共5本被剔除!11月SCIE/SSCI期刊目录更新!

期刊动态&#xff1a;2023年11月SCI、SSCI期刊目录更新 2023年11月20日&#xff0c;科睿唯安更新了WOS期刊目录&#xff0c;继上次10月WOS期刊目录剔除7本SCIE&SSCI期刊之后&#xff0c;此次11月更新又有5本期刊发生变动&#xff0c;其中有4本SCIE期刊被剔除&#xff0c;1…

微信运营神器:从群发到批量添加,让你的微信营销更轻松

在这个数字化时代&#xff0c;微信已经成为了我们生活中不可或缺的一部分。对于许多企业和个人来说&#xff0c;微信营销也是非常重要的一部分。但是&#xff0c;微信营销并不是一件容易的事情&#xff0c;需要花费大量的时间和精力。为了解决这个问题&#xff0c;今天我们将向…

Linux本地MinIO存储服务远程调用上传文件

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;…

淘宝返利APP草柴如何绑定淘宝账号?

草柴APP是一款淘宝、天猫、京东大额优惠券领取及购物返利省钱工具。通过草柴APP绑定淘宝账号&#xff0c;可领取淘宝大额内部隐藏优惠券&#xff0c;领取成功再购物可享券后价优惠&#xff0c;确认收货后可获得淘宝返利。 淘宝返利APP草柴如何绑定淘宝账号&#xff1f; 1、手…

Docker 快速搭建 Gitlab 服务

linux环境&#xff1a; 使用 vim 编辑 hosts 文件&#xff1a; vim /etc/hosts按 I 进入编辑模式&#xff0c;在文件末行追加上虚拟机的 IP 和要设置的域名&#xff1a; 192.168.1.17 gitlab.kunwu.toplwindows环境&#xff1a; Windows 系统的 hosts 文件位于 C:\Windows\S…

万宾科技智能井盖传感器效果,特点有哪些?

现在城市发展越来越好&#xff0c;对基础设施的改造越来越多&#xff0c;比如修路搭桥、整改生态等都是为民服务的好工程。平时走在路上我们享受着平整的路面&#xff0c;井然有序的交通也为我们带来很大的方便。但是一个又一个的井盖看起来无关紧要&#xff0c;实际上如果路上…

投标文件的注意事项

一、检查标书 1.1有时候标书需要从别的地方复制黏贴文件&#xff0c;记住复制内容可以&#xff0c;但是不要复制“落款和时间”的格式&#xff0c;落款和时间的格式借鉴你的招标文件中给响应文件格式的落款和时间&#xff0c;切记&#xff01; 1.2检查标书是否有空页&#xf…

数据科学导论——数据预处理

第1关:引言-根深之树不怯风折,泉深之水不会涸竭 第2关:数据清理-查漏补缺 import numpy as np import pandas as pd import matplotlib.pyplot as plt def student():train = pd.read_csv(Task1/diabetes_null.csv, na_values=[#NAME?])train[Insulin] = train[Insulin].f…

maxwell采集数据到kafka报错

问题&#xff1a; 启动maxwell后出现数据更新后就出现以下报错。 13:29:14,727 ERROR MaxwellKafkaProducer - TimeoutException Position[BinlogPosition[binlog.000002:12215591], lastHeartbeat1700717043797] -- maxWellData: medical:consultation:[(id,212)] 13:29:14,7…

Raptor安装

Raptor官网:https://raptor.martincarlisle.com/ 进入官网后&#xff0c;下拉找到 Download RAPTOR&#xff0c;windows系统的选择Windows Users 下载完成后打开&#xff0c;选择“next” 修改一下路径&#xff0c;不要放到C: 继续next 完结撒花

vue3的单组件的编写(三)【响应式 API 之 toRef 与 toRefs】

响应式 API 之 toRef 与 toRefs 前面讲了 ref 和 reactive 这两种响应式API &#xff0c;为了方便开发者使用&#xff0c;vue3 还出了两个用来 reactive 转换为 ref 的API&#xff0c;分别是 toRef 和 toRefs 。 &#x1f308;什么是toRef 与 toRefs 这两个API看拼写能猜到&…