WeChat アプレット ページに実装された画像保存の詳細な分析 (コード付き)

前回の記事「WeChat ミニ プログラムと Web (コード共有) の相互作用の簡単な分析 」では、WeChat ミニ プログラムと Web 間の相互作用について説明します。ウェブ。次の記事では、WeChat アプレット ページで画像を保存する方法を説明しますので、困っている友人は参考にしていただければ幸いです。

背景

ミニ プログラムの webview に画像を保存します。 WeChat の js-sdk は saveImageToPhotosAlbum メソッドを提供していないため、

ミニ プログラムとの詳細な web インタラクションについては、こちらを参照してください

ソリューションのアイデア

最初に WeChat をロードjs-sdk

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

3 つのステップ

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# では、 ## listen 関数は特定の時間にのみトリガーされ、メッセージを受信します。つまり、postMessageすべてのメッセージは、共有または webview のライフサイクルが終了した後にのみトリガーされます。これはメッセージ キューです:

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

}

So。保存を実行するとすぐに戻りイベントをトリガーできます。

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

完全なコードは次のとおりです:

html終了コード:

    <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: '填写一个远程的图片链接',
  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 ビデオ チュートリアル

以上がWeChat アプレット ページに実装された画像保存の詳細な分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。