用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){ …

Pinia状态持久化——插件pinia-plugin-persistedstate

pinia-plugin-persistedstate 旨在通过一致的 API 为 Pinia Store 提供持久化存储。如果希望保存一个完整的 Store&#xff0c;或者需要细粒化配置 storage 和序列化的方式&#xff0c;该插件都提供了相应的功能&#xff0c;并且可以在想要持久化的 Store 上使用相同的配置。 …

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 数据信息。而我们目前采用的是&…

Rust - cargo项目里多个二进制binary crate的编译运行

目录 foo - Cargo.toml - src - - main.rs - - bin - - - other-bin.rs将除默认入口文件外待作为二进制crate处理的文件放在src/bin目录下 方法一&#xff1a; 命令行增加配置项 --bin xxx cargo run --bin foo // 注意! 这里是包名&#xff0c;不是main cargo run --bin o…

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

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

MySQL -- JDBC

1、JDBC是什么&#xff1a; 是SUN公司制定的一套接口(interface)。接口都有调用者和实现者。面向接口调用、面向接口写实现类&#xff0c;这都属于面向接口编程。 2、在使用JDBC的六个步骤&#xff1a; 1.注册驱动&#xff08;告诉Java程序&#xff0c;即将连接的是哪个品牌…

业务系统上云后,如何满足员工移动办公快速访问业务系统的需求?

在企业业务上云的大趋势下&#xff0c;SaaS应用、云端办公协同工具等多种远程办公应用系统开始大规模普及&#xff0c;企业员工可以随时随地访问云上业务数据。然而现实情况却十分“打脸”&#xff0c;企业随时随地要访问云上业务的需求越迫切&#xff0c;问题就越大。由于多种…

算法通关村第十二关|白银|字符串经典基础面试题

1.反转问题 1.1 反转字符串 原题&#xff1a;力扣344. 要求原地修改。 public void reverseString(char[] s) {if (s null || s.length() 0) {return;}int n s.length;for (int left 0, right n - 1; left < right; left, right--) {char temp s[left];s[left] s…

小程序订阅消息

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

白杨SEO:2B企业营销是什么?当下主流的短视频直播平台有哪些?企业营销要做短视频直播选哪个平台更好?

今天白杨SEO就正式来讲讲2B企业营销选择哪个短视频直播平台更好&#xff1f; 图片在公众号&#xff1a;白杨SEO上看。 文章大纲提前看&#xff1a; 1、先说说2B企业营销是什么&#xff1f; 2、当下主流的短视频直播平台有哪些&#xff1f; 3、2B企业营销要做短视频直播选哪…

重磅!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…

Postgresql根据两表相同字段更新其中一个表的其他数据

有两个表 table1&#xff08;id,pcode,pname,type&#xff09; 初始数据只有id、pcode&#xff0c;pname、type为空table2&#xff08;id,pcode,pname,type&#xff09; 根据table1和table的相同字段pcode&#xff0c;用table2的数据更新table1的pname和type字段。 例如&…

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

在这个数字化时代&#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、手…