webview 保存图片并分享 html2canvas 解决生成图片无感

html2canvas一般生成图片必须是页面展示出来的，才能生成出图片，这个过程就会有一闪的过程(因为canvas绘制图片)这是一个必然出现的过程，有想过直接把绘制的那个页面隐藏，结果肯定是不行的；有做弹窗展示，弹窗直接弹出图片，这也是一种解决方法。而今天介绍的是另一种方法

ui库是uview
这次的想法是，生成的图片直接覆盖在dom的上面然后透明度设置为0，然后长按图片可以调用h5的图片属性，长按图片可以分享也可以保存。解决webview无法调用小程序保存图片的功能。这个功能还是要文字提示，长按图片并保存。不然用户也是不知道的。

<template>
    <view style="text-align: center" id="canvasImg" class="imgClass">
      <view class="msgtop"> 人物介绍 </view>
      <image
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc0271e06-53c3-47f5-922d-1d06a6126172%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707958377&t=a5be6ced7f7887465a3d182ab2342643"
        mode="scaleToFill"
        style="width: 400rpx; height: 400rpx"
      ></image>
      <view class="msg">
        <u-form label-width="150rpx" ref="uForm" label-align="left">
          <u-form-item label="项目：" label-align="left">卡通</u-form-item>
          <u-form-item label="人物：">未知</u-form-item>
        </u-form>
      </view>
      <view style="height: 1000rpx; width: 100%" class="imgBox">
        <view>
          <u-image
            :src="src"
            width="100%"
            mode="widthFix"
            height="1000rpx"
          ></u-image>
        </view>
      </view>
    </view>
</template>    
<script>

import html2canvas from "html2canvas";


export default {
  name: "canvas-img",
  filters: {},
  data() {
    return {
      src: "",
    };
  },
  mounted() {
    // 等待页面图片加载出来，以防画出空白的画面
    this.$nextTick(() => {
        setTimeout(() => {
          self.downloadImg();
        }, 500);
      });
  },
  methods: {
    downloadImg() {
      const self = this;
      const save = document.getElementById("canvasImg");
      var opts = {
        useCORS: true,
      };

      html2canvas(save, opts).then((canvas) => {
        let url = canvas.toDataURL("image/png");
        this.src = url;
      });
    },
  }
}
<style scoped lang="scss">
.imgBox {
  text-align: center;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0; // 这个是精髓
}
</style>