目錄
背景
解決想法
分三步驟
沒有接收到?不是即時觸發?
完整的程式碼如下:
其它相關
首頁 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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++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 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

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

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

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

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

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

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

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

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

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

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles