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

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

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

相关文章

卤制品配送经营商城小程序的用处是什么

卤制品也是食品领域重要的分支&#xff0c;尤其对年轻人来说&#xff0c;只要干净卫生好吃价格合理&#xff0c;那复购率宣传性自是不用说&#xff0c;而随着互联网发展&#xff0c;传统线下门店也须要通过线上破解难题或进一步扩大生意。 而商城小程序无疑是商家通过线上私域…

2023-9-26 JZ 复杂链表的复制

题目链接&#xff1a;复杂链表的复制 import java.util.*; /* public class RandomListNode {int label;RandomListNode next null;RandomListNode random null;RandomListNode(int label) {this.label label;} } */ public class Solution {public RandomListNode Clone(Ra…

Docker 容器编排

是什么 Docker-Compose是 Docker 官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。 Compose 是 Docker 公司推出的一个工具软件&#xff0c;可以管理多个 Docker 容器组成一个应用。你需要定义一个 YAML 格式的配置文件docker-compose.yml&#xff0c;写好多个…

【Java 基础篇】Java JUnit 使用详解

JUnit是一个用于编写和运行单元测试的Java框架。它是开发高质量、可维护和可扩展的Java应用程序的关键工具之一。本文将详细介绍JUnit的使用&#xff0c;包括JUnit的安装、基本用法、常见注解、测试套件、参数化测试等内容。 什么是单元测试&#xff1f; 在深入JUnit之前&…

【深度学习实验】卷积神经网络(二):自定义简单的二维卷积神经网络

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 二维互相关运算&#xff08;corr2d&#xff09; 2. 二维卷积层类&#xff08;Conv2D&#xff09; a. __init__&#xff08;初始化&#xff09; b. forward(前向传…

web浏览器公网远程访问jupyter notebook【内网穿透】

文章目录 前言1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 前言 Jupyter Notebook&#xff0c;它是一个交互式的数据科学和计算环境&#xff0c;支持多种编程语言&#xff0c;如…

【数据结构-树】哈夫曼树

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

【算法思想-排序】根据另一个数组次序排序 - 力扣 1122 题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

超越代写!5步教你轻松利用ChatGPT创作文本

任何尝试用 ChatGPT 写过“写一篇关于【主题】的文章”的人都知道一个真相&#xff1a; ChatGPT 根本写不好&#xff0c;这不是秘密。如果你怀疑我&#xff0c;试试用它或者任何 AI 写作工具去写一篇博客文章&#xff0c;结果它都会写出非常糟糕的、没人会想看的内容。 但是我…

springboot基于SpringBoot的冬奥会科普平台springboot21

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…

基于微信小程序的动漫论坛平台设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

RocketMQ生产环境常见问题分析与总结

关于零拷贝与顺序写 一、RocketMQ如何保证消息不丢失 1、哪些环节会有丢消息的可能&#xff1f; 我们考虑一个通用的MQ场景&#xff1a; 其中&#xff0c;1&#xff0c;2&#xff0c;4三个场景都是跨网络的&#xff0c;而跨网络就肯定会有丢消息的可能。 然后关于3这个环节…

地球的某一片红薯地中秋圆《乡村振兴战略下传统村落文化旅游设计》——旅行季许少辉八月新书辉少许想象和世界一样宽广

地球的某一片红薯地中秋圆《乡村振兴战略下传统村落文化旅游设计》——旅行季许少辉八月新书辉少许想象和世界一样宽广 地球的某一片红薯地中秋圆《乡村振兴战略下传统村落文化旅游设计》——旅行季许少辉八月新书辉少许想象和世界一样宽广]

JetBrains常用插件

Codota AI Autocomplete Java and JavaScript&#xff1a;自动补全插件 Background Image plus&#xff1a;背景图片设置 rainbow brackets&#xff1a;彩虹括号&#xff0c;便于识别 CodeGlance2&#xff1a; 类似于 Sublime 中的代码缩略图&#xff08;代码小地图&#xff…

什么是Redux?它的核心概念有哪些?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是Redux&#xff1f;⭐ 它的核心概念有哪些&#xff1f;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发…

如何通过bat批处理实现快速生成文件目录,一键生成文件名和文件夹名目录

碰对了情人&#xff0c;相思一辈子。 具体方法步骤&#xff1a; 一、创建一个执行bat文件&#xff08;使用记事本即可&#xff09;&#xff1b; 1、新建一个txt文本空白记事本文件 2、复制以下内容进记事本内 dir/a/s/b>LIST.TXT &#xff08;其中LIST.TXT文件名是提取后将…

【Go】rsrc不是内部或外部命令、无法将“rsrc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 解决方法

前言 想尝试用go创建一个桌面应用程序&#xff0c;然后查了下决定用 walk。 我们要先下载walk&#xff0c;这里 官方链接 按照官方文档&#xff0c;我们先用go get命令下载。 go get github.com/lxn/walk然后分别创建好了 main.go、main.manifest 文件&#xff0c;代码如下…

CV经典任务(一) 语义分割、实例分割 | 全卷积

文章目录 1 语义分割1.1 思路1 滑动窗口1.2 思路2 全卷积网络 2 代码实现3 实例分割 之前讲了分类 实际中除了分类还有几大视觉任务 语义分割&#xff0c;实例分割&#xff0c;目标检测 以上任务基本也都基于前面讲的卷积网络去做的 1 语义分割 语义分割&#xff08;Semant…

深度学习:模型训练过程中Trying to backward through the graph a second time解决方案

1 问题描述 在训练lstm网络过程中出现如下错误&#xff1a; Traceback (most recent call last):File "D:\code\lstm_emotion_analyse\text_analyse.py", line 82, in <module>loss.backward()File "C:\Users\lishu\anaconda3\envs\pt2\lib\site-packag…

常用的文本对比工具或网站

以下是一些常用的文本对比工具的下载地址或网站访问地址&#xff1a; DiffNow: https://www.diffnow.com/ WinMerge: https://winmerge.org/ Beyond Compare: https://www.scootersoftware.com/ Meld: https://meldmerge.org/ diff:文本对比/字符串差异比较 - 在线工具 请…