商城系統(tǒng) 注冊

小程序之保存圖片到相冊的幾種方法

2020-09-27|HiShop
導(dǎo)讀:保存圖片到本地有兩種方法,其一是網(wǎng)絡(luò)圖片保存到相冊,其二本地圖片保存到相冊。...

小程序保存圖片到本地總的來說有兩種方法,其一是網(wǎng)絡(luò)圖片保存到相冊,其二本地圖片保存到相冊。

小程序之保存圖片到相冊的幾種方法

 

官方文檔

保存圖片前需要授權(quán),因此我們先授權(quán),代碼如下:

 

  1. //獲取相冊授權(quán)
  2. wx.getSetting({
  3. success(res) {
  4. if (!res.authSetting['scope.writePhotosAlbum']) {
  5. wx.authorize({
  6. scope:'scope.writePhotosAlbum',
  7. success() {
  8. console.log('授權(quán)成功')
  9. }
  10. })
  11. }
  12. }
  13. })
  14. //此方法可以寫在app.js中,也可以寫在調(diào)用保存按鈕時(shí)。

 

獲取授權(quán)

第一種方法,網(wǎng)絡(luò)圖片保存:

 

  1. var imgSrc = "http://yijiao.oss-cn-qingdao.aliyuncs.com/images/http://tmp/wx1b4e5e756cd48af1.o6zAJsws4grEQvYrWTjBigy-6QaU.0llhudiKSF2V955a1c48350d9328ef064b4d36d12746.jpg"
  2. wx.downloadFile({
  3. url: imgSrc,
  4. success: function (res) {
  5. console.log(res);
  6. //圖片保存到本地
  7. wx.saveImageToPhotosAlbum({
  8. filePath: res.tempFilePath,
  9. success: function (data) {
  10. wx.showToast({
  11. title: '保存成功',
  12. icon: 'success',
  13. duration: 2000
  14. })
  15. },
  16. fail: function (err) {
  17. console.log(err);
  18. if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
  19. console.log("當(dāng)初用戶拒絕,再次發(fā)起授權(quán)")
  20. wx.openSetting({
  21. success(settingdata) {
  22. console.log(settingdata)
  23. if (settingdata.authSetting['scope.writePhotosAlbum']) {
  24. console.log('獲取權(quán)限成功,給出再次點(diǎn)擊圖片保存到相冊的提示。')
  25. } else {
  26. console.log('獲取權(quán)限失敗,給出不給權(quán)限就無法正常使用的提示')
  27. }
  28. }
  29. })
  30. }
  31. },
  32. complete(res){
  33. console.log(res);
  34. }
  35. })
  36. }
  37. })

第二種方法:選擇相冊圖片存入本地

 

  1. wx.chooseImage({
  2. count:1,// 默認(rèn)9
  3. sizeType: ['original','compressed'],// 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
  4. sourceType: ['album','camera'],// 可以指定來源是相冊還是相機(jī),默認(rèn)二者都有
  5. success:function (res) {
  6. // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
  7. console.log("choose image")
  8. console.log(res)
  9. var tempFilePath = res.tempFilePaths[0]
  10. wx.getImageInfo({
  11. src: tempFilePath,
  12. success:function (res) {
  13. console.log("get image info")
  14. console.log(res)
  15. wx.saveImageToPhotosAlbum({
  16. filePath: res.path,
  17. success(res) {
  18. console.log("保存圖片成功")
  19. console.log(res)
  20. wx.showToast({
  21. title:'保存成功',
  22. icon:'success',
  23. duration:2000
  24. })
  25. },
  26. fail(err) {
  27. console.log('失敗')
  28. console.log(err)
  29.  
  30. if (err.errMsg == "saveImageToPhotosAlbum:fail cancel"){
  31. wx.openSetting({
  32. success(settingdata) {
  33. console.log(settingdata)
  34. if (settingdata.authSetting["scope.writePhotosAlbum"]) {
  35. console.log('獲取權(quán)限成功,給出再次點(diǎn)擊圖片保存到相冊的提示。')
  36. }else {
  37. console.log('獲取權(quán)限失敗,給出不給權(quán)限就無法正常使用的提示')
  38. }
  39. }
  40. })
  41. }
  42. }
  43. })
  44. }
  45. })
  46. }
  47. })

 

 

小程序之保存圖片到相冊的幾種方法

電話咨詢 預(yù)約演示 0元開店