小程序webview和H5页面:间的通讯，页面截图保存到手机相册

1. 小程序页面，通过webview 嵌入的H5页面

<template>
  <web-view @message="postMessage" :src="url"></web-view>
</template>

<script>
export default {
  data() {
    return {
      imgBase64: "",
      url: "http://192.168.111.178:8080/H5Page", // 通过webview 嵌入的H5页面
    };
  },
  methods: {
    // 接收H5页返回的信息
    postMessage(options) {
      this.imgBase64 = options.detail.data[0].imgBase64 || "";
      if (this.imgBase64) {
        this.toSave();
      }
    },
    // 1.先判断手机相册是否授权；2.授权后再保存到相册
    toSave() {
      uni.showLoading({
        title: "正在生成图片",
        mask: true,
      });
      uni.getSetting({
        success: res => {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success: () => { // 授权成功
                uni.hideLoading();
                this.saveImg();
              },

              fail: res => {
                uni.hideLoading();
                uni.showToast('无法保存图片，请先授权')
              },
            });
          } else { // 已经授权！
            uni.hideLoading();
            this.saveImg();
          }
        },
      });
    },

    saveImg() {
      const base64Str = this.imgBase64.slice(22), // 注意这里,截掉 data:image/png;base64,
        buffer = uni.base64ToArrayBuffer(base64Str),
        filePath = wx.env.USER_DATA_PATH   "/base64src.png"; // base64src.png 为保存的图片名称

      uni.getFileSystemManager().writeFile({
        filePath, // 先把文件写到临时目录里
        // 方式一：
        data: buffer,
        encoding: "binary",
        // 方式二：
        // data: this.imgBase64.slice(22),
        // encoding: "base64",
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath, // 将临时文件 保存到相册
            success: res => {
              uni.showToast('图片保存成功')
            },
            fail: error => {
              uni.showToast('图片保存失败')
            },
          });
        },
        fail: error => {
          uni.showToast('图片保存失败')
        }
      });
    }
  }
};
</script>

2. H5页面

<template>
  <div class="wrap" >
    <div class="ct" v-show="bgImg">
       <img class="ct-close" @click="Close" src="~static/images/cancel.png" />
      <div class="ct-content" id="poster" ref="poster" :style="bgImg ? setStyle() : ''">
        <div class="ct-txt">{{text}}</div>
      </div>
      <div class="ct-submit" v-throttle="saveImg">保存图片</div>
    </div>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import axios from 'axios'
import snapshot from "@/utils/html2Canvas";
export default {
  data () {
    return {
      bgImg: '',
      text: ''
    }
  },
  async mounted () {
    const bgImg = await this.getImageInfo(
      '/api/img/20211008/123456.png'
    )
    this.bgImg = bgImg.src
  },
  methods: {
    setStyle () {
      return `background: url(${this.bgImg}) no-repeat; background-size: 100% 100%; `
    },
    Close () {
      wx.miniProgram.navigateBack({ delta: 1 })
    },
    getImageInfo (path) {
      // 将网络请求图片转换为本地图片，解决因跨域导致画布无法转换为图片问题
      return new Promise((resolve, reject) => {
        axios
          .get(path, { responseType: 'blob' })
          .then(res => {
            const blob = res.data
            const url = URL.createObjectURL(blob)
            const img = new Image()
            img.src = url
            img.onload = () => {
              resolve(img)
            }
          })
          .catch(() => {
            console.log('加载图片失败')
          })
      })
    },
    async saveImg () {
	    const imgBase64 = await snapshot(this.$refs.poster)
      /*
        h5中postMessage虽然会立即提交信息，但是小程序并不会立即受理。小程序webview上的监听函数，只会在特定时机触发并接收到消息。
        即postMessage所有的消息都只能等得分享或webview的生命周期结束时才会被触发，它是一个消息队列。
        在保存图片时，可以立即触发它的返回事件。
      */
      wx.miniProgram.postMessage({
        data: {
          imgBase64 // 要传给小程序的信息
        }
      })
      wx.miniProgram.navigateBack({ delta: 1 }) // 注意：只有执行此事件后，才能在webview的事件监听中接收到信息
    }
  }
}
</script>

这篇好文章是转载于：学新通技术网