wxml:

<view class="container">

<view class='page-section'>

<view class="saveImage" style="padding:0 8px;">

<view class="img_box" style="text-align:center;">

<image src="這里寫合法域名下的圖片路徑（https開頭）" style="width:93px;height:38px;margin-top:10px"></image>

</view>

<button class="weui-btn" type="primary" bindtap='onSavePicClick' data-img="這里寫合法域名下的圖片路徑（https開頭）">點擊保存圖片</button>

</view>

</view>

</view>

?

js:

Page({
? downloadImage: function (imageUrl) {
? ? // 下載文件 ?
? ? wx.downloadFile({
? ? ? ? url: imageUrl,
? ? ? ? success: function (res) {
? ? ? ? ? ? console.log("下載文件：success");
? ? ? ? ? ? console.log(res);

? ? ? ? ? ? // 保存圖片到系統相冊 ?
? ? ? ? ? ? wx.saveImageToPhotosAlbum({
? ? ? ? ? ? ? ? filePath: res.tempFilePath,
? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? console.log("保存圖片：success");
? ? ? ? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? ? ? ? ? title: '保存成功',
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? fail(res) {
? ? ? ? ? ? ? ? ? ? console.log("保存圖片：fail");
? ? ? ? ? ? ? ? ? ? console.log(res);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? },
? ? ? ? fail: function (res) {
? ? ? ? ? ? console.log("下載文件：fail");
? ? ? ? ? ? console.log(res);
? ? ? ? }
? ? })
? },
? onSavePicClick: function (e) {
? ? var that=this;?
? ? console.log("onSavePicClick");
? ? console.log(e);
? ? var downloadUrl = e.currentTarget.dataset.img ;
? ? console.log("downloadUrl=" + downloadUrl);

? ? if (!wx.saveImageToPhotosAlbum) {
? ? ? ? wx.showModal({
? ? ? ? ? ? title: '提示',
? ? ? ? ? ? content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
? ? ? ? })
? ? ? ? return;
? ? }

? ? // 可以通過 wx.getSetting 先查詢一下用戶是否授權了 "scope.writePhotosAlbum" 這個 scope ?
? ? wx.getSetting({
? ? ? ? success(res){
? ? ? ? ? ? console.log("getSetting: success");
? ? ? ? ? ? if (!res.authSetting['scope.writePhotosAlbum']) {
? ? ? ? ? ? ? ? console.log("1-沒有授權《保存圖片》權限");

? ? ? ? ? ? ? ? // 接口調用詢問 ?
? ? ? ? ? ? ? ? wx.authorize({
? ? ? ? ? ? ? ? ? ? scope: 'scope.writePhotosAlbum',
? ? ? ? ? ? ? ? ? ? success() {
? ? ? ? ? ? ? ? ? ? ? ? console.log("2-授權《保存圖片》權限成功");
? ? ? ? ? ? ? ? ? ? ? ? that.downloadImage(downloadUrl);
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? fail() {
? ? ? ? ? ? ? ? ? ? ? ? // 用戶拒絕了授權 ?
? ? ? ? ? ? ? ? ? ? ? ? console.log("2-授權《保存圖片》權限失敗");
? ? ? ? ? ? ? ? ? ? ? ? // 打開設置頁面 ?
? ? ? ? ? ? ? ? ? ? ? ? wx.openSetting({
? ? ? ? ? ? ? ? ? ? ? ? ? ? success: function (data) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log("openSetting: success");
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? fail: function (data) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log("openSetting: fail");
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? console.log("1-已經授權《保存圖片》權限");
? ? ? ? ? ? ? ? that.downloadImage(downloadUrl)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? fail(res) {
? ? ? ? ? ? console.log("getSetting: fail");
? ? ? ? ? ? console.log(res);
? ? ? ? }

? ? })

? },?
})

效果圖：

總結

以上是生活随笔為你收集整理的小程序生成图片保存到系统相册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。