uniapp——实现base64格式二维码图片生成+保存二维码图片——基础积累

news2024/11/27 8:40:59

最近在做二维码推广功能,自从2020年下半年到今天,大概有三年没有用过uniapp了,而且我之前用uniapp开发的程序还比较少,因此很多功能都浪费了很多时间去查资料,现在把功能记录一下。

这里写目录标题

  • 效果图
  • 1.`base64`生成图片二维码——`image`组件
  • 2.长按保存——`longtap`
            • 2.1 `h5`的保存功能
            • 2.2 `app`的保存功能

效果图

在这里插入图片描述
下面介绍一下整体流程:
上篇文章是讲的是将图片链接内容通过qrcode组件生成二维码,但是,就刚刚,我才知道后端返给我的是base64位的图片内容。。。。。。

1.base64生成图片二维码——image组件

<image style="width:300rpx;" mode="widthFix" src="data:image/png;base64,二进制" ></image>

2.长按保存——longtap

<image @longtap="longtap" style="width:300rpx;" mode="widthFix" src="data:image/png;base64,二进制" ></image>
2.1 h5的保存功能
longtap(){
	// #ifdef H5
	var oA = document.createElement("a");
	oA.download = '图片名称.png'; // 设置下载的文件名,默认是'下载'
	oA.href = "data:image/png;base64,二进制";    //图片url
	document.body.appendChild(oA);
	oA.click();
	oA.remove(); // 下载之后把创建的元素删除
	// #endif
},
2.2 app的保存功能
// #ifdef APP-PLUS
let base64 = "data:image/png;base64,二进制";
 const bitmap = new plus.nativeObj.Bitmap("test");
 bitmap.loadBase64Data(base64, function() {
   const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
   console.log('saveHeadImgFile', url)
   bitmap.save(url, {
       overwrite: true,  // 是否覆盖
       // quality: 'quality'  // 图片清晰度
   }, (i) => {
       uni.saveImageToPhotosAlbum({
           filePath: url,
           success: function() {
               uni.showToast({
                   title: '图片保存成功',
                   icon: 'success'
               })
               bitmap.clear()
           }
       });
   }, (e) => {
       uni.showToast({
           title: '图片保存失败',
           icon: 'none'
       })
       bitmap.clear()
   });
}, (e) => {
   uni.showToast({
       title: '图片保存失败',
       icon: 'none'
   })
   bitmap.clear()
});
// #endif

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

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

相关文章

go语言---锁

什么是锁呢&#xff1f;就是某个协程&#xff08;线程&#xff09;在访问某个资源时先锁住&#xff0c;防止其它协程的访问&#xff0c;等访问完毕解锁后其他协程再来加锁进行访问。这和我们生活中加锁使用公共资源相似&#xff0c;例如&#xff1a;公共卫生间。 死锁 死锁是…

共享股东:一种让连锁门店企业家赚钱的新模式

你是否经营着一家或多家连锁门店&#xff0c;想要提高你的收入和竞争力&#xff1f;你是否想要吸引更多的客户和投资者&#xff0c;让他们成为你的忠实合作伙伴&#xff1f;你是否想要利用互联网的力量&#xff0c;让你的门店变得更加智能和高效&#xff1f;如果你的答案是肯定…

JavaScript速成课—事件处理

目录 一.事件类型 1.窗口事件 2.表单元素事件 3.图像事件 4.键盘事件 5.鼠标事件 二.JavaScript事件处理的基本机制 三.绑定事件的方法 1.DOM元素绑定 2.JavaScript代码绑定事件 3.监听事件函数绑定 四.JavaScript事件的event对象 1.获取event对象 2.鼠标坐标获取…

11、Kubernetes核心技术 - Service

目录 一、概述 二、Endpoint 三、Service资源清单 四、Service 类型 4.1、ClusterIP 4.2、NodePort 4.3、LoadBalancer 4.4、ExternalName 五、Service使用 5.1、ClusterIP 5.1.1、定义Pod资源清单 5.1.2、创建Pod 5.1.3、定义Service资源清单 5.1.4、创建Servic…

面试官:请说说flex布局_番茄出品.md

面试官&#xff1a;请说说flex布局_番茄出品.md start 依然记得当初学习 flex 布局时&#xff0c;用 flex 布局&#xff1a;画麻将。一筒到九筒&#xff0c;应有尽有。但是光和面试官说&#xff0c;我用 flex 布局画过麻将&#xff0c;并没有什么用。面试官问你一个语法&…

Hadoop:YARN、MapReduce、Hive操作

目录 分布式计算概述 YARN概述 YARN架构 核心架构 辅助架构 MapReduce 概述 配置相关文件 提交MapReduce到YARN Hive Hive架构 Hive在VMware部署 Hive的启动 数据库操作 数据表操作 内部表操作 外部表操作 数据加载和导出 数据加载LOAD 数据加载 - INSERT SEL…

生物的神经系统与机器的人工神经网络

生物的神经系统与机器的人工神经网络 文章目录 前言一、人工神经网络二、生物的神经系统三、关系四、相似与区别4.1. 相似&#xff1a;4.2. 区别: 总结 前言 因为本人是学生物的&#xff0c;并且深度学习的核心——人工神经网络与生物的神经系统息息相关&#xff0c;故想要在本…

单片机测量任务运行时间

前言 1.之前是直接看定时器的计数值来粗略估计&#xff0c;可能会存在一些差错&#xff0c;也不够方便&#xff1b;所以做一个比较通用的计算任务运行时间的小Demo。 2.用定时器的计数值查看开始的Tick和结束的Tick&#xff0c;然后定时器每隔1毫秒溢出一次&#xff0c;通过简…

QML 碰到的奇怪问题

text elied属性失效 elied属性就是当Text的文本文字超过Text的宽度时。文字会出现省略的效果。 import QtQuick 2.9 import QtQuick.Window 2.3Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle{anchors.centerIn: parentwidth: pa…

颜色扩散类dp及其优化:0919T2

http://cplusoj.com/d/senior/p/330 此题前半部分是AGC058B 这是一个颜色扩散类dp&#xff0c;对于这类dp&#xff0c;存在一个性质。 假如一个区间被 i i i 染&#xff0c;一个被 j j j 染&#xff0c;则必然满足 i < j i<j i<j&#xff08;这是下标&#xff09…

基于SSM的智慧城市实验室主页系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

e签宝,再「进化」

基于ePaaS&#xff0c;e签宝不仅打造了电子签领域的生态圈&#xff0c;也正在赋能整个SaaS行业奔向生态化的良性业态&#xff0c;这将使得SaaS厂商的边界愈发清晰&#xff0c;逐渐实现“量产”&#xff0c;奔向规模化。 作者|斗斗 出品|产业家 1957年11月&#xff0c;江苏…

文件字符输出流(FileWriter)(基础流)

1、不追加的情况 package com.csdn.d4_char_stream; import java.io.FileWriter; import java.io.IOException; import java.io.Writer; public class FileWriterDemo01 {public static void main(String[] args) throws IOException {//1、创建一个字符输出流管道与目标文件接…

Android进阶之路 - 盈利、亏损金额格式化

在金融类型的app中&#xff0c;关于金额、数字都相对敏感和常见一些&#xff0c;在此仅记录我在金融行业期间学到的皮毛&#xff0c;如后续遇到新的场景也会加入该篇 该篇大多采用 Kotlin 扩展函数的方式进行记录&#xff0c;尽可能熟悉 Kotlin 基础知识 兄弟 Blog StringUti…

Kafka为什么是高性能高并发高可用架构

目录 1 前言2 顺序写入3 页缓存4 零拷贝5 Broker 性能6 流数据并行7 总结 1 前言 我们都知道 Kafka 是基于磁盘进行存储的&#xff0c;但 Kafka 官方又称其具有高性能、高吞吐、低延时的特点&#xff0c;其吞吐量动辄几十上百万。小伙伴们是不是有点困惑了&#xff0c;一般认为…

Linux——IO

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;Linux——文件系统 ☂️<3>开发环境&#xff1a;Centos7 &#x1f4ac;<4>前言&#xff1a;是不是只有C/C有文件操作呢&#xff1f;python&#xff0c;java&…

Code Ocean :一个用于数据科学和科学研究的在线平台【源码+文章解析】

Code Ocean&#xff08;https://codeocean.com/&#xff09;是一个用于数据科学和科学研究的在线平台&#xff0c;旨在帮助研究人员更轻松地管理、共享和复制研究代码和数据。以下是Code Ocean的主要用途和功能&#xff1a; 代码和数据的管理&#xff1a;Code Ocean允许研究人…

辨析目录表、文件打开表、文件分配表、索引表、FCB、inode、fd等文件系统常见名词

文章目录 1 解释2 形象配图 以下内容仅供简单的辨析这些文件系统最基本的名词&#xff0c;如果需要更深入的了解&#xff0c;请查阅相关转移书籍&#xff0c;如《现代操作系统》、《操作系统概念》 、《操作系统精髓与设计原理》等书籍。 1 解释 2 形象配图 文件打开表 文件分…

工控机连接Profinet转Modbus RTU网关与水泵变频器Modbus通讯

Profinet转Modbus RTU网关是一个具有高性能的通信设备&#xff0c;它能够将工控机上的Profinet协议转换成水泵变频器可识别的Modbus RTU协议&#xff0c;实现二者之间的通信。通过这种方式&#xff0c;工控机可以直接控制水泵变频器的运行状态&#xff0c;改变其工作频率&#…

Windows10下的GTSAM因子图安装与使用

Windows10下的GTSAM因子图安装与使用 一、windows系统预安装1. windows 10安装gcc2.windows 10 安装 boost3.CMake 安装与查看4.CMake 配置boost 二、GTSAM安装与使用三、CMAKE 创建立 使用GTSAM的Visual Studio项目参考文献 一、windows系统预安装 1. windows 10安装gcc htt…