Analyse approfondie de la sauvegarde des images implémentées dans les pages de l'applet WeChat (avec code)-Tutoriel H5-php.cn

Dans l'article précédent "Une brève analyse de l'interaction entre les mini-programmes WeChat et le Web (partage de code)", je vais vous donner une compréhension de l'interaction entre les mini-programmes WeChat et le Web. L'article suivant vous expliquera comment enregistrer des images sur la page de l'applet WeChat. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Analyse approfondie de la sauvegarde des images implémentées dans les pages de l'applet WeChat (avec code)

Arrière-plan

Enregistrez l'image dans la webview du mini programme. Parce que le js-sdk de WeChat ne fournit pas la méthode saveImageToPhotosAlbumwebview里保存图片。因为微信的js-sdk没有提供saveImageToPhotosAlbum方法

更多web和小程序的交互，请看这里

解决思路

先加载微信js-sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

Copier après la connexion

分三步

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 数据
    },
  });
};

Copier après la connexion

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
        })
    }
})

Copier après la connexion

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);
  },
});

Copier après la connexion

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);
  },
});

Copier après la connexion

没有接收到？不是实时触发？

文档发现虽然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)
            }
        })
    }

}

Copier après la connexion

所以，我们在执行保存的时候可以立马触发它的返回事件。

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

Copier après la connexion

完整的代码如下：

html

Pour plus d'interaction entre le web et les mini-programmes, veuillez

voir ici

pour le résoudre Idée

Chargez d'abord WeChat js-sdk


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>

Copier après la connexion

En trois étapes

1 Convertissez l'image en base64 sur le html<. /code>, puis transmettez-le à l'applet via <code>postmessage

// 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)
            }
        })
    }
})

Copier après la connexion

🎜🎜2 L'applet écoute postmessage et obtient l'image

base64</. code> données. 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">  wx.showLoading({
      title: &quot;正在下载图片... &quot;,
      mask: !1
  })

  wx.downloadFile({
  url: &amp;#39;填写一个远程的图片链接&amp;#39;,
  success: function(t) {

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

  },
  fail: function(t) {
      wx.showModal({
          title: &quot;图片下载失败&quot;,
          content: t.errMsg,
          showCancel: !1
      });
  },
  complete: function(t) {
      wx.hideLoading();
  }
  }))</pre><div class="contentsignin">Copier après la connexion</div></div>🎜🎜3. Enregistrez l'image dans l'album (dans le mini programme) 🎜🎜🎜Parce que vous obtenez les données d'image <code>base64

, vous devez d'abord les enregistrer en tant que fichier image. 🎜rrreee🎜🎜Le base64 écrit par writeFile de getFileSystemManager ne contient pas l'octet d'en-tête de l'image. Nous devons donc nous débarrasser des données :image/jpeg;base64 et autres caractères🎜🎜🎜Avec le chemin du fichier, vous pouvez l'enregistrer dans l'album🎜rrreee🎜Vous ne l'avez pas reçu ? Pas déclenché en temps réel ? 🎜🎜Le document révèle que même si postMessage dans h5 soumettra les informations immédiatement, le mini-programme ne les acceptera pas immédiatement dans le mini-programme

webview La fonction d'écoute ne sera déclenchée et ne recevra des messages qu'à des moments précis : c'est-à-dire que tous les messages dans <code>postMessage

ne pourront être déclenchés qu'après la fin du cycle de vie du partage ou de la webview. . Il s'agit d'une file d'attente de messages : 🎜rrreee🎜🎜Donc🎜, on peut déclencher son événement de retour immédiatement lors de l'exécution de la sauvegarde. 🎜rrreee🎜Le code complet est le suivant : 🎜🎜Code latéral html : 🎜rrreee🎜Code latéral du petit programme : 🎜rrreee🎜Autre lié🎜🎜🎜Enregistrer les images à distance🎜🎜rrreee🎜Apprentissage recommandé : 🎜 Tutoriel vidéo SVG🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!