微信小程序保存在线图片和视频以及base64字符串案例代码
Base64图片的下载
js
// pages/test/test2/test2.js
Page({
/**
* 页面的初始数据
*/
data: {
imageurl: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options);
let url = options.url // 这个url就是一个base64字符串,data:image/png;base64,...开头
// 分片
let quarterLength = Math.ceil(url.length / 4);
let str1 = url.substring(0, quarterLength);
let str2 = url.substring(quarterLength, quarterLength * 2);
let str3 = url.substring(quarterLength * 2, quarterLength * 3);
let str4 = url.substring(quarterLength * 3); // 将base64字符串拆分成四份,解决数据传输长度过长问题
this.setData({
imageurl: (str1 + str2 + str3 + str4).replace(/[\r\n]/g, '') // 这个base64不能有换行符之类的,不然页面展示不了,这里进行一下处理
})
},
// 将base64字符串转成图片文件
base64ToImageFile(base64Data, callback) {
const fs = wx.getFileSystemManager();
const timestamp = new Date().getTime();
const filePath = `${wx.env.USER_DATA_PATH}/image_${timestamp}.png`;
// 去掉前缀
base64Data = base64Data.replace(/^data:image\/png;base64,/, '');
try {
const buffer = wx.base64ToArrayBuffer(base64Data);
fs.writeFile({
filePath: filePath,
data: buffer,
encoding: 'binary',
success: () => {
callback(filePath);
},
fail: (err) => {
console.error('保存Base64图片到本地失败:', err);
}
});
} catch (e) {
console.error('Base64转换失败:', e);
}
},
// 保存图片
saveBase64ImageToPhotosAlbum(base64Data) {
wx.showLoading({
title: '正在保存...',
})
//视频保存到相册跟图片保存到相册使用方式相同
//下载到本地，判断是否拥有权限
wx.getSetting({
withSubscriptions: true,
success: res => {
console.info(res.authSetting);
if (res.authSetting['scope.writePhotosAlbum']) {
this.base64ToImageFile(base64Data, (filePath) => {
wx.saveImageToPhotosAlbum({
filePath: filePath,
success: (res) => {
wx.hideLoading()
setTimeout(()=>{
wx.showToast({
title: '保存成功',
icon: 'success',
});
},500)
setTimeout(()=>{
wx.navigateBack()
},2500)
},
fail: (err) => {
wx.hideLoading()
setTimeout(()=>{
wx.showToast({
title: '保存失败',
icon: 'error'
});
},500)
setTimeout(()=>{
wx.navigateBack()
},2500)
console.error('保存图片到相册失败:', err);
}
});
});
} else {
wx.hideLoading()
wx.showModal({
cancelColor: 'cancelColor',
title: '提示',
content: '请开启相册访问权限',
success: res => {
if (res.confirm) {
wx.openSetting({
withSubscriptions: true,
})
} else if (res.cancel) {
setTimeout(()=>{
wx.showToast({
title: '保存失败',
icon: 'error'
});
},500)
setTimeout(()=>{
wx.navigateBack()
},2500)
console.log('点击了取消,返回上层');
}
}
})
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示(页面显示就执行下载逻辑,不过还是建议放到onLoad生命周期内)
*/
onShow() {
// 这个base64不能有换行符之类的imageurl刚好在存数据时把空格去掉了
this.saveBase64ImageToPhotosAlbum(this.data.imageurl.split(',')[1])
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})在线图片下载到相册(包含进度条)
js
// 下载封面到相册
downloadImageClick(e) {
//视频保存到相册跟图片保存到相册使用方式相同
//下载到本地，判断是否拥有权限
wx.getSetting({
withSubscriptions: true,
success: res => {
console.info(res.authSetting);
if (res.authSetting['scope.writePhotosAlbum']) {
const downloadTask = wx.downloadFile({
url: e.currentTarget.dataset.url, // 这个就是在线图片链接
success: res => {
//保存到相册
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
console.info(res);
wx.showToast({
title: "保存成功",
icon: 'success'
});
},
fail: res => {
wx.showToast({
title: '保存失败',
icon: error
})
}
})
},
fail(err){
wx.showToast({
title: '保存失败，建议复制链接请前往浏览器下载，或者重新生成视频',
icon:"none"
})
}
});
// 监听下载进度更新事件
downloadTask.onProgressUpdate((res) => {
// console.log('下载进度', res.progress);
// console.log('已下载的数据长度', res.totalBytesWritten);
// console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite);
// 更新下载进度显示
wx.showLoading({
title: `下载中... ${res.progress}%`,
});
});
} else {
wx.showModal({
cancelColor: 'cancelColor',
title: '提示',
content: '请开启相册访问权限',
success: res => {
if (res.confirm)
wx.openSetting({
withSubscriptions: true,
})
}
})
}
}
})
},在线视频下载到相册(包含进度条)
js
//下载视频到相册
downloadVideoClick(e) {
console.log(e.currentTarget.dataset.url);
//视频保存到相册跟图片保存到相册使用方式相同
//下载到本地，判断是否拥有权限
wx.getSetting({
withSubscriptions: true,
success: res => {
console.info(res.authSetting);
if (res.authSetting['scope.writePhotosAlbum']) {
const downloadTask = wx.downloadFile({
url: e.currentTarget.dataset.url, // 这个就是在线视频链接
success: res => {
//保存到相册
wx.saveVideoToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
console.info(res);
wx.showToast({
title: "保存成功",
icon: 'success'
});
},
fail: res => {
wx.showToast({
title: '保存失败',
icon: "error"
})
}
})
},
fail(err){
console.log(err);
wx.showToast({
title: '保存失败，建议复制链接请前往浏览器下载，或者重新生成视频',
icon:"none"
})
}
});
// 监听下载进度更新事件
downloadTask.onProgressUpdate((res) => {
// console.log('下载进度', res.progress);
// console.log('已下载的数据长度', res.totalBytesWritten);
// console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite);
// 更新下载进度显示
wx.showLoading({
title: `下载中... ${res.progress}%`,
});
});
} else {
wx.showModal({
cancelColor: 'cancelColor',
title: '提示',
content: '请开启相册访问权限',
success: res => {
if (res.confirm)
wx.openSetting({
withSubscriptions: true,
})
}
})
}
},
fail(err){
console.log(err);
}
})
},