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

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

news 2025/6/29 22:11:57

最近在做二维码推广功能，自从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