关于h5，页面分享到朋友圈、钉钉、微信等，(base64图片转换成文件）

实现内容：将页面分享到朋友圈、钉钉、微信。
主要思想如图：

      <div class="header-right" @click="shareDetail">分享</div>
          /**
     * 分享链接（微信、朋友圈、钉钉、工作圈）
     */
    async shareDetail() {
      this.$nextTick(() => {
        html2canvas(this.$refs.main, {   //利用canvas将画面截图下来
          width:
            window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth,
          height: this.$refs.main.offsetHeight,
        }).then(async (canvas) => {
          //canvas为转换后的Canvas对象
          console.log("canvas------",canvas)
          let img = canvas.toDataURL("images/png");  //导出图片
          console.log("img------",img)
          let url = await this.getOss(img);   //拿到直接可以浏览图片的路径

          this.isUploading = false;
          this.shareWeb(JSON.stringify({ type: 4, url }));
        });
      });
    },
        /**
     * 生成oss链接
     */
    async getOssUrl(dataUrl) {
      let file = this.base64ToFile(dataUrl);   //将base64得图片转换成文件

      try {
        let res = await commonApi.getOss();  //获取图片上传的一些
        console.log(res.data)
        let data = JSON.parse(res.data);
        let randomNum = Math.random().toString().replace(".", "");
        let ossParams = {
          policy: data.policy,
          OSSAccessKeyId: data.accessid,
          signature: data.signature,
          key: `${data.dir}${randomNum}.${file.type.split("/")[1]}`,  //拼接完成类似于front/2020/10/30/随机数.png（后缀名）
        };
        let formData = new FormData();
        for (let i in ossParams) {
          formData.append(i, ossParams[i]);
        }
        formData.append("file", file);

        await postOss(data.host, formData); //请求接口，接口返回直接可以浏览图片的路径

        return `${data.host}/${ossParams.key}`;   
      } catch (e) {}
    },
    Vue.prototype.shareWeb = function shareWeb(data) {
  try {
    const device = whichdevice();   //判断是什么设备（函数省略）
    if (window.webview || window.webkit) {
      if (device.android) {
        window.webview.shareWeb(data);
      } else if (device.ios) {
        window.webkit.messageHandlers.shareWeb.postMessage(data);
      } else {
        console.error("非ios或Android设备");
      }
    } else {
      console.error("webview方法未注册");
    }
  } catch (e) {
    console.error("无法调设备shareWeb方法");
  }
};

一些后台输出内容

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201030093549427.PNG#pic_center