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

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

这里写目录标题

效果图

下面介绍一下整体流程:

上篇文章是讲的是将图片链接内容通过qrcode组件生成二维码,但是,就刚刚,我才知道后端返给我的是base64位的图片内容。。。。。。

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

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

2.长按保存------longtap

js 复制代码
<image @longtap="longtap" style="width:300rpx;" mode="widthFix" src="data:image/png;base64,二进制" ></image>
2.1 h5的保存功能
js 复制代码
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的保存功能
js 复制代码
// #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
相关推荐
SUPER52662 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
街尾杂货店&2 小时前
word属性解释
uni-app
sanx182 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友5 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar5 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙8 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump8 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~8 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript