Analisis mendalam untuk menyimpan imej yang dilaksanakan dalam halaman applet WeChat (dengan kod)-Tutorial H5-php.cn

Analisis mendalam untuk menyimpan imej yang dilaksanakan dalam halaman applet WeChat (dengan kod)

奋力向前

Lepaskan： 2021-08-18 09:48:08

ke hadapan

5169 orang telah melayarinya

Dalam artikel sebelumnya "Analisis Ringkas Interaksi antara Program Mini WeChat dan Web (Perkongsian Kod) ", saya akan memberi anda pemahaman tentang interaksi antara Program Mini WeChat dan web. Artikel berikut akan memberi anda pemahaman tentang cara menyimpan imej pada halaman applet WeChat Rakan-rakan yang memerlukan saya harap ia akan membantu anda.

Analisis mendalam untuk menyimpan imej yang dilaksanakan dalam halaman applet WeChat (dengan kod)

Latar Belakang

Simpan gambar dalam webview program mini. Kerana WeChat js-sdk tidak menyediakan saveImageToPhotosAlbum kaedah

untuk lebih banyak interaksi web dengan program mini, sila lihat di sini

idea penyelesaian

Muat pertama memuatkan WeChatjs-sdk

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

Salin selepas log masuk

dalam tiga langkah

1 Tukar imej kepada html melalui base64, dan kemudian hantar ke program Mini 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 数据
    },
  });
};

Salin selepas log masuk

2. Program mini memantau dan mendapatkan data postmessage imej. 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
        })
    }
})

Salin selepas log masuk

3 Simpan gambar ke album (dalam program mini)

Oleh kerana anda mendapat

data gambar, anda perlu untuk menyimpannya dahulu Simpan sebagai fail imej. 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);
  },
});

Salin selepas log masuk

base64 yang ditulis oleh writeFile getFileSystemManager tidak termasuk bait pengepala imej. Jadi anda perlu membuang data:image/jpeg;base64, dan tunggu aksara

Setelah anda mempunyai laluan fail, anda boleh menyimpannya ke album

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

Salin selepas log masuk

Tidak diterima? Tidak dicetuskan dalam masa nyata?

Dokumen mendapati bahawa walaupun

dalam h5 akan menyerahkan maklumat serta-merta, program mini tidak akan menerimanya serta-merta Fungsi mendengar pada program mini postMessage hanya akan dicetuskan dan dikumpulkan pada masa tertentu Mesej: Iaitu, semua mesej webview hanya boleh dicetuskan selepas ia dikongsi atau kitaran hayat postMessage tamat. Ia ialah baris gilir mesej: 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)
            }
        })
    }

}

Salin selepas log masuk

Jadi , kita boleh mencetuskan acara pemulangannya serta-merta apabila melaksanakan simpan.

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

Salin selepas log masuk

Kod lengkap adalah seperti berikut:

Kod terminal: 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>

Salin selepas log masuk

Kod terminal kecil:

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

Salin selepas log masuk

Lain-lain Berkaitan

Menyimpan gambar jauh

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

Salin selepas log masuk

Pembelajaran yang disyorkan:

Tutorial video SVG

Atas ialah kandungan terperinci Analisis mendalam untuk menyimpan imej yang dilaksanakan dalam halaman applet WeChat (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!