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

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

最近在做二维码推广功能,自从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 H5var oA = document.createElement("a");oA.download = '图片名称.png'; // 设置下载的文件名,默认是'下载'oA.href = "data:image/png;base64,二进制";    //图片urldocument.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

相关文章:

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

最近在做二维码推广功能&#xff0c;自从2020年下半年到今天&#xff0c;大概有三年没有用过uniapp了&#xff0c;而且我之前用uniapp开发的程序还比较少&#xff0c;因此很多功能都浪费了很多时间去查资料&#xff0c;现在把功能记录一下。 这里写目录标题 效果图1.base64生成…...

【二叉树魔法:链式结构与递归的纠缠】

本章重点 二叉树的链式存储二叉树链式结构的实现二叉树的遍历二叉树的节点个数以及高度二叉树的创建和销毁二叉树的优先遍历和广度优先遍历二叉树基础oj练习 1.二叉树的链式存储 二叉树的链式存储结构是指&#xff0c;用链表来表示一棵二叉树&#xff0c;即用链来指示元素的逻辑…...

FL Studio21.0.3最新中文版下载安装详解

安装第一步&#xff1a;卸载干净fl历史旧版本&#xff0c;彻底退出安全软件 &#xff08;如果下载好的文件无法打开&#xff0c;可以去百度下载一个解压工具&#xff0c;比如bandzip、360压缩、2345好压...&#xff09;&#xff08;卸载直接用电脑管家卸载或者在左下角开始处找…...

【算法与数据结构】JavaScript实现十大排序算法(一)

文章目录 关于排序算法冒泡排序选择排序插入排序希尔排序归并排序 关于排序算法 稳定排序&#xff1a; 在排序过程中具有相同键值的元素&#xff0c;在排序之后仍然保持相对的原始顺序。意思就是说&#xff0c;现在有两个元素a和b&#xff0c;a排在b的前面&#xff0c;且ab&…...

IntelliJ IDEA使用——插件推荐

官网插件库&#xff1a;https://plugins.jetbrains.com/search 代码规范检测&#xff1a;Alibaba Java Coding Guidelines码云&#xff1a;Giteemybatis插件&#xff1a;MyBatisX多颜色括号&#xff1a;Rainbow Brackets操作快捷键提示&#xff1a;Key Promoter X力扣&#xff…...

编写一个会导致死锁的程序,将怎么解决?

死锁发生在两个或多个线程互相等待对方释放资源的情况下。下面是一个可能导致死锁的情况: public class DeadlockExample {private static final Object lock1 = new Object();private static final Object lock2 = new...

Java JVM分析利器JProfiler 结合IDEA使用详细教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、JProfiler是什么&#xff1f;二、我的环境三、安装步骤1.Idea安装JProfiler插件1.下载程序的安装包 四、启动 前言 对于我们Java程序员而言&#xff0c;肯…...

包含日志文件

原理&#xff1a;某个PHP文件存在本地包含漏洞&#xff0c;却无法上传正常文件&#xff0c;包含漏洞却不能利用&#xff0c;攻击者就有可能会利用apache日志文件来入侵。 Apache服务器运行后会生成两个日志文件&#xff0c;这两个文件是access.log(访问日志)和error.log(错误日…...

李航老师《统计学习方法》第2章阅读笔记

感知机&#xff08;perceptron&#xff09;时二类分类的线性分类模型&#xff0c;其输入为实例的特征向量&#xff0c;输出为实例的类别&#xff0c;取1和-1二值。感知机对应于输入空间&#xff08;特征空间&#xff09;中将实例划分为正负两类的分离超平面 想象一下在一个平面…...

ruoyi框架修改左侧菜单样式

菜单效果 ruoyi前端框架左侧的菜单很丑&#xff0c;我们需要修改一下样式&#xff0c;下面直接看效果。 修改代码 1、sidebar.scss .el-menu-item, .el-submenu__title {overflow: hidden !important;text-overflow: ellipsis !important;white-space: nowrap !important;//…...

【已解决】PyCharm里的黄色波浪线

问题描述 有时候在PyCharm中某些代码下面会有黄色波浪线。 问题解释 黄色波浪线只是提示这段代码不规范&#xff0c;但对程序的运行并没有本质影响。...

设计模式:策略模式(C++实现)

策略模式&#xff08;Strategy Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一系列的算法&#xff0c;并将每个算法封装成独立的对象&#xff0c;使得它们可以互相替换。下面是一个使用C实现策略模式的示例&#xff1a; #include <iostream>// 抽象策略类…...

网络安全深入学习第二课——热门框架漏洞(RCE—Thinkphp5.0.23 代码执行)

文章目录 一、什么是框架&#xff1f;二、导致框架漏洞原因二、使用步骤三、ThinkPHP介绍四、Thinkphp框架特征五、Thinkphp5.0.23 远程代码执行1、漏洞影响范围2、漏洞成因 六、POC数据包Windows下的Linux下的 七、漏洞手工复现1、先Burp抓包&#xff0c;把抓到的请求包发送到…...

Pdf文件签名检查

如何检查pdf的签名 首先这里有一个已经签名的pdf文件&#xff0c;通过pdf软件可以看到文件的数字签名。 图1为签名后的文件&#xff0c;图2为签名后文件被篡改。 下面就是如何代码检查这里pdf文件的签名 1.引入依赖 <dependency><groupId>org.projectlombok<…...

web前端之float布局与flex布局

float布局 <style>.nav {overflow: hidden;background-color: #6adfd0; /* 导航栏背景颜色 */}.nav a {float: left;display: block;text-align: center;padding: 14px 16px;text-decoration: none;color: #000000; /* 导航栏文字颜色 */}.nav a:hover {background-col…...

expected ‘,’ after expression in R【R错误】

出现如下错误&#xff1a; 在红色叉的位置&#xff0c;会有提示“expected . after expression”&#xff0c;咋一看出现红色叉的位置没有任何的错误&#xff0c;怎么会出现错误呢&#xff1f; 解决办法&#xff1a; 寻找这个代码第一次出现红色叉的位置&#xff0c;看其是否…...

算法|图论 2

LeetCode 695- 岛屿的最大面积 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述&#xff1a;给你一个大小为 m x n 的二进制矩阵 grid 。 岛屿 是由一些相邻的 1 (代表土地) 构成的组合&#xff0c;这里的「相邻」要求…...

使用C#实现服务端与客户端的简陋聊天

服务端代码: using System; using System.Net.Sockets; using System.Net; using System.IO;//服务器程序 namespace CSharpStudy_09_21 {class Program{static void Main(string[] args){int port 8865;TcpClient tcpClient;//创建tcp对象IPAddress[] serverIp Dns.GetHost…...

生成式模型和判别式模型区别

目录 1.概念 2.定义​ 3.举例​ &#xff08;1&#xff09;例子 A​ &#xff08;2&#xff09;例子 B​ 4.特点 5.优缺点 6.代表算法 1.概念 首先我们需要明确&#xff0c;两种不同的模型都用于监督学习任务中。监督学习的任务就是从数据中学习一个模型&#xff0c;并用…...

【kafka实战】03 SpringBoot使用kafka生产者和消费者示例

本节主要介绍用SpringBoot进行开发时&#xff0c;使用kafka进行生产和消费 一、引入依赖 <dependencies><dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId></dependency><depen…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...