【微信小程序】将base64图片保存至本地

需求描述

微信小程序中，下载一个报告文件，直接可获取到的是报告图片的base64格式。

参考文章

1、微信小程序实现图片下载功能
2、微信小程序把base64的图片保存到手机相册

代码实现

1、wxml

样式根据自己的需要调

<view><!--在这个view里面可以显示报告图片--><view style="width:100%;height:240px"><image src="{{report}}" style="width: 80%; height: 220px; margin-left:10%"></image></view><!--在这个view里面有一个下载报告的按钮--><view><view bindtap="downloadReport">下载报告</view></view>
</view>

2、.js

Page({/*** 页面的初始数据*/data: {report:"",base64:"",},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {const that = this;//调用接口，获取图片的base64var base = that.getReportFile();//赋值that.setData({base64: base,report: "data:image/png;base64,"+that.data.base64})},//将base64图片文件保存至用户系统相册downloadReport(){const that = this;var filepath = wx.env.USER_DATA_PATH+'/test.png';//获取文件管理器对象var aa = wx.getFileSystemManager();aa.writeFile({filePath: filepath,data: that.data.base64,encoding:'base64',success: res => {wx.showLoading({title: '正在保存...',mask: true});//保存图片到相册wx.saveImageToPhotosAlbum({filePath: filepath,success: function (res) {wx.hideLoading();wx.showToast({title: '保存成功！',icon: 'success',duration: 2000//持续的时间})},fail: function (err) {wx.hideLoading();if(errerrMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response"){wx.showModal({title: '提示',content: '需要您授权保存相册',showCancel: false,success: modalSuccess => {wx.openSetting({success(settingdata) {console.log("settingdata", settingdata)if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.showModal({title: '提示',content: '获取权限成功,再次点击下载按钮进行保存',showCancel: false,})} else {wx.showModal({title: '提示',content: '获取权限失败，将无法保存到相册哦~',showCancel: false,})}},fail(failData) {console.log("failData", failData)},complete(finishData) {console.log("finishData", finishData)}})}})}}})}, fail: err => {console.log(err)}})}
})

---------------------2022/06/23修改

变化

获取到报告数据流后，先用writeFile将base64转为图片，将图片地址放到image组件src属性中。

参考文章

微信小程序中base64转换成图片；uni-app小程序base64转图片；微信小程序base64文件转图片；微信小程序base64图片转图片

代码修改

1、.js

   Page({/*** 页面的初始数据*/data: {report:'',},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {const that = this;//调用接口，获取图片的base64var base = that.getReportFile();that.base64ToSrc(base);},//将base64转为图片base64ToSrc(base64) {const that = this;//获取文件管理器对象var fsm = wx.getFileSystemManager();fsm.writeFile({filePath,data: base64,encoding: 'base64',success() {that.setData({report:filePath})},fail() {console.log('ERROR');},});   },//将base64图片文件保存至用户系统相册downloadHsjcReport(){const that = this;wx.showLoading({title: '正在保存...',mask: true});//保存图片到相册wx.saveImageToPhotosAlbum({filePath: that.data.report,success: function (res) {wx.hideLoading();wx.showToast({title: '保存成功！',icon: 'success',duration: 2000//持续的时间})},fail: function (err) {wx.hideLoading();if(err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response"){wx.showModal({title: '提示',content: '需要您授权保存相册',showCancel: false,success: modalSuccess => {wx.openSetting({success(settingdata) {console.log("settingdata", settingdata)if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.showModal({title: '提示',content: '获取权限成功,再次点击下载按钮进行保存',showCancel: false,})} else {wx.showModal({title: '提示',content: '获取权限失败，将无法保存图片到相册',showCancel: false,})}},fail(failData) {console.log("failData", failData)},complete(finishData) {console.log("finishData", finishData)}})}})}}})}
})

【微信小程序】将base64图片保存至本地相关推荐

微信小程序点击图片保存到相册
小程序实现点击图片保存到相册温馨提示:小程序图片在本地保存成功后放到线上失效,应该是没有设置合法的文件下载域名 // 下载事件函数bindImage: function (e) {var url = ...
微信小程序将base64图片格式保存至手机相册
// 保存图片 let settingWritePhotosAlbum = false; export const saveImg = function(url, callback ) {//获取文件 ...
微信小程序中base64图片的显示与保存
当我们拿到如下base64格式的数据时: 显示使用image标签,src属性添加data:image/png;base64, (注意:若imgData返回数据中含有data:image/png;ba ...
微信小程序长按图片保存至相册
效果图: 描述: 「长按图片」,是否授权保存图片or视频到相册,「授权成功」,点击「保存到相册」即可完成. 代码: wxml <image src="{{imgSrc}}" ...
微信小程序-长按图片保存到相册
首页需要通过 wx.getSetting 先查询一下用户是否授权了写入相册权限: 其次对于网络图片,可调用wx.downloadFile下载文件资源到本地: 然后非网络图片,可以调用wx.getIma ...
用canvas绘制微信小程序海报页面并保存相册-适用微信原生
微信小程序绘制海报并保存相册 tip:代码中使用的是uni的api 如果使用原生微信小程序开发,可以把uni更换成wx使用文章目录微信小程序绘制海报并保存相册前言一.分析需求二.准备数据三 ...
android可拖拽九宫格,微信小程序实现九宫格图片拖拽
(在真机上的效果就不演示了,是差不多的) 实现思路布局在这里运用到了微信小程序的moveable-area和moveable-view两个标签. moveable-area是可拖拽的区域,需要设置 ...
微信小程序中进行图片压缩
微信小程序中进行图片压缩问题: 一般情况下,小程序在进行拍照识别的时候,上传图片的大小会使小程序出现冗余,这个时候,为了减少小程序的冗余并且使上传的图片可以分辨出该图片中的内容是那些内容,我们就需 ...
微信小程序内拖动图片实现移动、放大、旋转
最近接到一个任务,在微信小程序内拖动图片组件实现移动.放大.旋转,并记录这些图片的移动位置,放大比例,旋转角度,在一个画布上生成一张图片,最后保存到手机相册. 我的具体实现思路是这样的:(文章底部留有 ...

【微信小程序】将base64图片保存至本地

需求描述

参考文章

代码实现

变化

参考文章

代码修改

【微信小程序】将base64图片保存至本地相关推荐

最新文章

热门文章