目錄
背景
解決想法
分三步驟
沒有接收到?不是即時觸發?
完整的程式碼如下:
其它相關
首頁 web前端 H5教程 深入解析微信小程式頁面中實現的保存圖片(附程式碼)

深入解析微信小程式頁面中實現的保存圖片(附程式碼)

Aug 18, 2021 am 09:42 AM
h5 html js web

之前的文章《淺析微信小程式與web之間的互動(程式碼分享)》中,給大家了解微信小程式和web之間的互動。以下這篇文章給大家了解一下微信小程式頁面中實現的保存圖片,有需要的朋友可以參考一下,希望對你們有幫助。

深入解析微信小程式頁面中實現的保存圖片(附程式碼)

背景

在小程式的webview裡儲存圖片。因為微信的js-sdk沒有提供saveImageToPhotosAlbum方法

更多web和小程式的交互,請看這裡

解決想法

先載入微信js-sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
登入後複製

分三步驟

1、html端把圖片轉為base64,然後透過postmessage傳遞給小程式

let img = new Image();
img.src = "xxxx"; //这里是图片的src
img.crossOrigin = "anonymous"; //The opeartaion is insecure . 其它跨域的问题 自行代理解决
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 数据
    },
  });
};
登入後複製

2、小程式監聽postmessage拿到圖片base64資料。

// 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. 儲存圖片到相簿(在小程式裡)

因為拿到是base64圖片數據,首先要把它存為圖片檔。

wx.getFileSystemManager().writeFile({
  filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //这里先把文件写到临时目录里.
  data: this.data.imageData.slice(22), // 注意这里
  encoding: "base64",
  success: (res) => {
    console.log("success");
  },
  fail: (error) => {
    console.log(error);
  },
});
登入後複製

getFileSystemManager的writeFile寫入的base64是不包含圖片的頭字節的。所以要幹掉data:image/jpeg;base64,等字元

有了檔案路徑就可以儲存到相簿了

wx.saveImageToPhotosAlbum({
  filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //这是把临时文件 保存到 相册, 收工
  success: (res) => {
    wx.showToast({
      title: "保存成功!",
    });
  },
  fail: (error) => {
    console.log(error);
  },
});
登入後複製

沒有接收到?不是即時觸發?

文件發現雖然h5中的postMessage會馬上提交信息,但是小程式並不會馬上受理,在小程式webview上的監聽函數,只會在特定時機觸發並收到訊息:也就是postMessage所有的訊息都只能等得分享或webview的生命週期結束才會被觸發。他是一個訊息佇列:

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

}
登入後複製

所以,我們可以在執行儲存的時候立刻觸發它的回傳事件。

function() {
    // 此处省略
    wx.miniProgram.postMessage({
        data: {
            xxx: &#39;aaa&#39;
        }
    })
    wx.miniProgram.navigateBack({
        delta: 1
    }) //注意这里.
}
登入後複製

完整的程式碼如下:

html端程式碼:


webchat webview save image
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> function saveImage() { let img = new Image() img.src = &#39;xxxx&#39; //这里是图片的src img.crossOrigin = &#39;anonymous&#39; //The opeartaion is insecure , 其他跨域问题自行代理解决. img.onload = function() { let canvas = document.createElement(&#39;canvas&#39;) canvas.width = img.width canvas.height = img.height let ctx = canvas.getContext(&#39;2d&#39;) ctx.drawImage(this, 0, 0) let imgBase64Data = canvas.toDataURL(&#39;image/jpeg&#39;, 1) //这里就拿到了base64 wx.miniProgram.postMessage({ data: { imgData: imgBase64Data // 刚才拿到的base64 数据 } }) wx.miniProgram.navigateBack({ delta: 1 }) //注意这里. } } </script>
登入後複製

小程式端程式碼:

// 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 + &#39;/qrcode.jpeg&#39;, //这里先把文件写到临时目录里.
            data: img.slice(22), //注意这里
            encoding: &#39;base64&#39;,
            success: res => {
                console.log(&#39;success&#39;)
                wx.saveImageToPhotosAlbum({
                    filePath: wx.env.USER_DATA_PATH + &#39;/qrcode.jpeg&#39;, //这是把临时文件 保存到 相册, 收工
                    success: res => {
                        wx.showToast({
                            title: &#39;保存成功!&#39;
                        })
                    },
                    fail: error => {
                        console.log(error)
                    }
                })
            },
            fail: error => {
                console.log(error)
            }
        })
    }
})
登入後複製

其它相關

儲存遠端圖片

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

  wx.downloadFile({
  url: &#39;填写一个远程的图片链接&#39;,
  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();
  }
  }))
登入後複製

推薦學習:SVG影片教學

#

以上是深入解析微信小程式頁面中實現的保存圖片(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格邊框

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

HTML 中的巢狀表

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

在 HTML 中移動文字

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

您如何在PHP中解析和處理HTML/XML?

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕

See all articles