小編給大家分享一下微信小程序頁(yè)面中如何實(shí)現(xiàn)保存圖片，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶(hù)提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、國(guó)際域名空間、雅安服務(wù)器托管、網(wǎng)絡(luò)營(yíng)銷(xiāo)、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶(hù)提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶(hù)的口碑塑造優(yōu)易品牌,攜手廣大客戶(hù),共同發(fā)展進(jìn)步。

背景

在小程序的webview里保存圖片。因?yàn)槲⑿诺?code>js-sdk沒(méi)有提供saveImageToPhotosAlbum方法

解決思路

先加載微信js-sdk

分三步

1、html端把圖片轉(zhuǎn)為base64，然后通過(guò)postmessage傳遞給小程序

let img = new Image();
img.src = "xxxx"; //這里是圖片的src
img.crossOrigin = "anonymous"; //The opeartaion is insecure . 其它跨域的問(wèn)題 自行代理解決
img.onload = function () {
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  let ctx = canvas.getContext("2d");
  ctx.drawImage(this, 0, 0);
  let imgBase64Data = canvas.toDataURL("image/jpeg", 1); //這里就拿到了base64
  wx.miniProgram.postMessage({
    data: {
      imgData: imgBase64Data, // 剛才拿到的base64 數(shù)據(jù)
    },
  });
};

2、小程序監(jiān)聽(tīng)postmessage拿到圖片base64數(shù)據(jù)。

// wxml
<
web - view src = "http://www.chuchur.com/save-image"
bindmessage = "getMessage" > < /web-view>

// js
Page({
    data: {
        imageData: null
    }
    getMessage(e) {
        this.setData({
            imageData: e.detail.data[0].imgData
        })
    }
})

3. 保存圖片到相冊(cè)（在小程序里）

因?yàn)槟玫绞?code>base64圖片數(shù)據(jù)，首先要把它存為圖片文件。

wx.getFileSystemManager().writeFile({
  filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //這里先把文件寫(xiě)到臨時(shí)目錄里.
  data: this.data.imageData.slice(22), // 注意這里
  encoding: "base64",
  success: (res) => {
    console.log("success");
  },
  fail: (error) => {
    console.log(error);
  },
});

getFileSystemManager的writeFile寫(xiě)入的base64是不包含圖片的頭字節(jié)的。所以要干掉data:image/jpeg;base64，等字符

有了文件路徑就可以保存到相冊(cè)了

wx.saveImageToPhotosAlbum({
  filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //這是把臨時(shí)文件 保存到 相冊(cè), 收工
  success: (res) => {
    wx.showToast({
      title: "保存成功！",
    });
  },
  fail: (error) => {
    console.log(error);
  },
});

沒(méi)有接收到？不是實(shí)時(shí)觸發(fā)？

文檔發(fā)現(xiàn)雖然h6中的postMessage會(huì)馬上提交信息，但是小程序并不會(huì)馬上受理，在小程序webview上的監(jiān)聽(tīng)函數(shù)，只會(huì)在特定時(shí)機(jī)觸發(fā)并收到消息：也就是postMessage所有的消息都只能等得分享或webview的生命周期結(jié)束才會(huì)被觸發(fā)。他是一個(gè)消息隊(duì)列：

getMessage: function(e) {
    if (e.type === 'message' && e.detail && e.detail.data && e.detail.data.length > 0) {
        e.detail.data.forEach(function(dataItem) {
            if (dataItem.type === 'qbreport' && dataItem.key) {
                // todo： yourFn(dataItem.key)
            }
        })
    }

}

所以，我們?cè)趫?zhí)行保存的時(shí)候可以立馬觸發(fā)它的返回事件。

function() {
    // 此處省略
    wx.miniProgram.postMessage({
        data: {
            xxx: 'aaa'
        }
    })
    wx.miniProgram.navigateBack({
        delta: 1
    }) //注意這里.
}

完整的代碼如下：

html端代碼：

    
    

    
        下載圖片
        
    

小程序端代碼：

// wxml
<
web - view src = "http://www.chuchur.com/save-image"
bindmessage = "getMessage" > < /web-view>

// js
Page({

    getMessage(e) {

        let img = e.detail.data[0].imgData

        wx.getFileSystemManager().writeFile({
            filePath: wx.env.USER_DATA_PATH + '/qrcode.jpeg', //這里先把文件寫(xiě)到臨時(shí)目錄里.
            data: img.slice(22), //注意這里
            encoding: 'base64',
            success: res => {
                console.log('success')
                wx.saveImageToPhotosAlbum({
                    filePath: wx.env.USER_DATA_PATH + '/qrcode.jpeg', //這是把臨時(shí)文件 保存到 相冊(cè), 收工
                    success: res => {
                        wx.showToast({
                            title: '保存成功！'
                        })
                    },
                    fail: error => {
                        console.log(error)
                    }
                })
            },
            fail: error => {
                console.log(error)
            }
        })
    }
})

其它相關(guān)

保存遠(yuǎn)程圖片

  wx.showLoading({
      title: "正在下載圖片... ",
      mask: !1
  })

  wx.downloadFile({
  url: '填寫(xiě)一個(gè)遠(yuǎn)程的圖片鏈接',
  success: function(t) {

      wx.showLoading({
          title: "正在保存圖片",
          mask: !1
      })
      wx.saveImageToPhotosAlbum({
          filePath: t.tempFilePath,
          success: function() {
              wx.showModal({
                  title: "自定義提示信息",
                  content: "保存成功",
                  showCancel: !1
              });
          },
          fail: function(t) {
              wx.showModal({
                  title: "圖片保存失敗",
                  content: t.errMsg,
                  showCancel: !1
              });
          },
          complete: function(t) {
              wx.hideLoading();
          }
      });

  },
  fail: function(t) {
      wx.showModal({
          title: "圖片下載失敗",
          content: t.errMsg,
          showCancel: !1
      });
  },
  complete: function(t) {
      wx.hideLoading();
  }
  }))

以上是“微信小程序頁(yè)面中如何實(shí)現(xiàn)保存圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！