H5
H5只要提示用户长按保存图片就可以了，浏览器自带保存图片功能。
App+小程序
<!-- #ifdef APP-PLUS -->
<image :src="图片地址" mode="aspectFill" @longpress="savePhoto(图片地址)"/>
<!-- #endif -->
<!-- #ifdef MP -->
<image :src="图片地址" mode="aspectFill" @longpress="savePosterPath(图片地址)"/>
<!-- #endif -->
APP保存图片
// APP保存图片
savePhoto(downloadUrl) {
// 先下载图片
uni.downloadFile({
url:downloadUrl,
success: (res) => {
// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.showToast({
title: "保存成功！",
});
},
fail: () => {
uni.showToast({
title: "保存失败",
});
},
});
},
});
},
小程序保存图片（授权后保存）
// 小程序保存图片
savePosterPath(downloadUrl) {
uni.downloadFile({
url:downloadUrl,
success: (resFile) => {
console.log(resFile, "resFile");
if (resFile.statusCode === 200) {
uni.getSetting({
success: (res) => {
if (!res.authSetting["scope.writePhotosAlbum"]) {
uni.authorize({
scope: "scope.writePhotosAlbum",
success: () => {
uni.saveImageToPhotosAlbum({
filePath: resFile.tempFilePath,
success: (res) => {
return uni.showToast({
title: "保存成功！",
});
},
fail: (res) => {
return uni.showToast({
title: res.errMsg,
});
},
complete: (res) => {},
});
},
fail: () => {
uni.showModal({
title: "您已拒绝获取相册权限",
content: "是否进入权限管理，调整授权？",
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
console.log(res.authSetting);
},
});
} else if (res.cancel) {
return uni.showToast({
title: "已取消！",
});
}
},
});
},
});
} else {
uni.saveImageToPhotosAlbum({
filePath: resFile.tempFilePath,
success: (res) => {
return uni.showToast({
title: "保存成功！",
});
},
fail: (res) => {
return uni.showToast({
title: res.errMsg,
});
},
complete: (res) => {},
});
}
},
fail: (res) => {},
});
} else {
return uni.showToast({
title: resFile.errMsg,
});
}
},
fail: (res) => {
return uni.showToast({
title: res.errMsg,
});
},
});
},
补充：APP和小程序保存base64图片到本地的方法
saveBase64Img(base64) {
// #ifdef APP-PLUS
let imageStr = "data:image/png;base64," + base64;
// 保存到本地
let bitmap = new plus.nativeObj.Bitmap("goods_poster");
bitmap.loadBase64Data(
imageStr,
() => {
console.log("加载Base64图片数据成功");
bitmap.save(
"_doc/goods_poster.png",
{},
(i) => {
console.log("保存图片成功：" + JSON.stringify(i));
bitmap.clear();
},
(e) => {
onsole.log("保存图片失败：" + JSON.stringify(e));
bitmap.clear();
}
);
},
(e) => {
console.log("加载Base64图片数据失败：" + JSON.stringify(e));
bitmap.clear();
}
);
// #endif
// #ifdef MP
var fileManager = uni.getFileSystemManager();
fileManager.writeFile({
filePath: "/img.jpg", // 指定图片的临时路径
data: base64, // 要写入的文本或二进制数据
encoding: "base64", // 指定写入文件的字符编码
success: (res) => {
console.log("写入文件成功，文件路径信息为：", res);
转换本地路径成功后这里可以用上面的图片保存方法
},
file: (err) => {
console.log("写入文件失败", err);
},
});
// #endif
}
