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

news/2024/4/25 17:33:28

最近在做二维码推广功能,自从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.tangninghui.cn.cn/item-271.htm

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

相关文章

短信、邮箱验证码本地可以,部署到服务器接口却不能使用

应对公司双验证要求&#xff0c;对本系统做邮箱、短信验证码登录&#xff0c;本地开发正常发送&#xff0c;到服务器上部署却使用失败&#xff0c;已全部解决&#xff0c;记录坑。 一、nginx拦截 先打开你的服务器 nginx.conf 看看有没有做接口拦截。&#xff08;本地可能做Sp…

十分钟理解OSPF路由协议

十分钟理解OSPF路由协议 1.RIP的缺陷以跳数为度量值最大跳数为15更新路由表采用全更新收敛速度慢 2.RIP与OSPF比较OSPF概述运行OSPF协议之前运行OSPF协议之后 3.OSPF协议工作过程1.发现邻居2.建立邻接关系3.传递链路状态信息4.计算路由 4.OSPF分区域管理 有RIP协议&#xff0c;…

Python 文件写入操作

视频版教程 Python3零基础7天入门实战视频教程 w模式是写入&#xff0c;通过write方法写入内容。 # 打开文件 模式w写入&#xff0c;文件不存在&#xff0c;则自动创建 f open("D:/测试3.txt", "w", encoding"UTF-8")# write写入操作 内容写入…

文件操作和IO

平时我们所谈到的“文件”都是指硬盘上的文件 硬盘&#xff08;外存&#xff09;和内存相比&#xff1a; 速度&#xff1a;内存比硬盘块很多空间&#xff1a;内存空间比硬盘小成本&#xff1a;内存比硬盘贵&#xff08;都挺便宜的了&#xff09;持久化&#xff1a;内存掉电后…

docker 方式安装mysql 主从方式keepalived实现高可用

一、环境介绍 二、MySQL安装 在两台服务器上都安装mysql 1、拉取镜像 docker pull mysql:8.0.272、创建挂载目录 mkdir -p /data/mysql/3、运行容器 主节点 docker run \--restartalways \--name master_mysql -p 3306:3306 \-e MYSQL_ROOT_PASSWORD123456 -d \-v /data/m…

在华为云服务器上CentOS 7安装单机版Redis

https://redis.io/是官网地址。 点击右上角的Download。 可以进入https://redis.io/download/——Redis官网下载最新版的网址。 然后在https://redis.io/download/页面往下拉&#xff0c;点击下图超链接这里。 进入https://download.redis.io/releases/下载自己需要的安装…