微信小程式中保存網路圖片的方法介紹（程式碼範例）

這篇文章帶給大家的內容是關於微信小程式中保存網路圖片的方法介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

此功能需要新增appid才能進行正常的測試。

在小程式的文件中我們得知，wx.saveImageToPhotosAlbum 是用來保存圖片到相簿的。

但仔細一看會發現這個介面的filePath參數只接受臨時檔案路徑或永久檔案路徑，不支援網路圖片路徑，表示我們不能直接呼叫這個介面。 。

因此先需要把該檔案下載到本地，使用 wx.downloadFile 。

但值得注意的是小程式只可以跟指定的網域與進行網路通信，也就是說下載圖片之前，我們需要先去微信公眾者平台的開發設定設定uploadFile合法網域。

範例程式碼如下：

<!-- index.wxml -->
<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">保存图片</button>

// index.js
const app = getApp()

Page({
  data: {
    url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4'
  },

  // 保存图片
  saveImage() {
    this.wxToPromise('downloadFile', {
        url: this.data.url
      })
      .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
        filePath: res.tempFilePath
      }))
      .then(res => {
        // do something
        wx.showToast({ title: '保存成功~',icon: 'none' });
      })
      .catch(err) => {
        console.log(err);

        // 如果是用户自己取消的话保存图片的话
        // if (~err.errMsg.indexOf('cancel')) return;
      })
  },

  /**
   * 将 callback 转为易读的 promise
   * @returns [promise]
   */
  wxToPromise(method, opt) {
    return new Promise((resolve, reject) => {
      wx[method]({
        ...opt,
        success(res) {
          opt.success && opt.success();
          resolve(res)
        },
        fail(err) {
          opt.fail && opt.fail();
          reject(err)
        }
      })
    });
  },
})

然後理論上就可以儲存圖片了... 使用者第一次在我們的小程式使用儲存圖片這個功能是會彈出一個授權彈框，如果使用者手滑點了拒絕授權後再點一次儲存圖片，然後就會發現什麼反應都沒有了。 。 。

出現這樣的原因是因為這個授權彈框只會出現一次，所以我們得想辦法再讓使用者重新授權一次。這時就想到使用 wx.authorize .

但是經過測試後發現，使用 wx.authorize 後，會報 authorize:fail auth deny 的錯誤。然後經過查閱資料得知：

如果用戶未接受或拒絕過此權限，會彈出視窗詢問用戶，用戶點擊同意後方可呼叫介面；

如果用戶已授權，可以直接呼叫介面；

如果使用者已拒絕授權，則不會出現彈跳窗，而是直接進入介面fail 回呼。請開發者相容於使用者拒絕授權的場景。

emmm... 那這樣效果當然不符合我們預期，只能在換個方式。這時就想到了使用<button open-type="openSetting"/>，在互動上做一個提示彈框，引導使用者重新授權：

<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">保存图片</button>

<!-- 简陋版提示 -->
<view wx:if="{{showDialog}}" class="dialog-wrap">
  <view class="dialog">
    这是一段提示用户授权的提示语
    <view class="dialog-footer">
      <button
        class="btn"
        open-type="openSetting"
        bindtap="confirm" >
         授权
      </button>
      <button class="btn" bindtap="cancel">取消</button>
    </view>
  </view>
</view>

const app = getApp()

Page({
  data: {
    url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4',
    showDialog: false,
  },

  saveImage() {
    this.wxToPromise('downloadFile', {
        url: this.data.url
      })
      .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
        filePath: res.tempFilePath
      }))
      .then(res => {
        console.log(res);
        // this.hide();
        wx.showToast({
          title: '保存成功~',
          icon: 'none',
        });
      })
      .catch(({ errMsg }) => {
        console.log(errMsg)
        // if (~errMsg.indexOf('cancel')) return;
        if (!~errMsg.indexOf('auth')) {
          wx.showToast({ title: '图片保存失败，稍后再试', icon: 'none' });
        } else {
          // 调用授权提示弹框
          this.setData({
            showDialog: true
          })
        };
      })
  },

  // callback to promise
  wxToPromise(method, opt) {
    return new Promise((resolve, reject) => {
      wx[method]({
        ...opt,
        success(res) {
          opt.success && opt.success();
          resolve(res)
        },
        fail(err) {
          opt.fail && opt.fail();
          reject(err)
        }
      })
    });
  },

  confirm() {
    this.setData({
      showDialog:false
    })
  },

  cancel() {
    this.setData({
      showDialog: false
    })
  }
})

最後這樣就完成囉~

本文參考：微信小程式開發基礎教學https://www.html.cn/study/20.html

以上是微信小程式中保存網路圖片的方法介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！