小程序DOM如何转为图片并将图片分享给朋友？

方案一：h5中转页

1、利用web端插件html2canvas将dom转成图片 --h5端

// 入参请参考文档：http://www.dtmao.cc/ios/65361.html
  html2canvas(refdom, {
    useCORS: true,
    scale: 2
  }).then((canvas) => {
    const imgUrl= canvas.toDataURL();
    console.log('图片url打印：', imgUrl)
  }).catch(err => {
    console.log('err:', err)
  })

2、拿到图片信息后，设置自动返回对应页面，同时将图片信息返回给对应界面展示 --小程序端

方案二：将dom绘画在canvas上，然后再将canvas转成图片

1、.wxml文件

<image src="{{imgUrl}}" mode="aspectFit" show-menu-by-longpress />
<button bindtap="onShare">生成海报</button>
<canvas id="myCanvas" type="2d" />

2、.ts文件

  data = {
    // 画布相对ui图放大比例
    posterSize: 2
  };
   onShare() {
    try {
      wx.createSelectorQuery()
        .select('#myCanvas') // 在 WXML 中填入的 id
        .fields({ node: true, size: true })
        .exec(async res => {
          const { posterSize } = this.data
          wx.showLoading({
            title: '海报生成中',
            mask: false,
          });
          // Canvas 对象
          const canvas = res[0].node
          // Canvas 画布的实际绘制宽高
          const renderWidth = 300 * posterSize
          const renderHeight = 400 * posterSize
          // Canvas 绘制上下文
          const ctx = canvas.getContext('2d')

          // 初始化画布大小
          const dpr = wx.getWindowInfo().pixelRatio
          canvas.width = renderWidth * dpr
          canvas.height = renderHeight * dpr
          ctx.scale(dpr, dpr)

          // 插入直播间分享图
          await this.createdImg(canvas, ctx, 'https://resurl.fuchuang.com/aef734b0-0b5b-11ee-b3ac-abf6790ece2d-juxingbeifen%402x.png', [0, 0, 300, 240]);

          // 画个圆形将超出圆形部分的图片裁剪为圆形一样大
          // 保存当前 Canvas 画布状态
          ctx.save()
          // 先画圆形
          ctx.beginPath();
          ctx.arc(235 * posterSize, 340 * posterSize, 48 * posterSize, 0, 2 * Math.PI * posterSize);
          // 设置绘制圆形边框的颜色
          ctx.strokeStyle = '#ffffff';
          // 绘制圆形边框
          ctx.stroke();
          ctx.fillStyle = "#ffffff"
          ctx.fill();
          // 插入小程序二维码
          ctx.clip()
          await this.createdImg(canvas, ctx, 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM7obwOicODY0ZfvZdp5VOoVLTxY0hibU7tq1UkFUUE7sC3Q/0', [200, 305, 70, 70]);
          // 恢复到保存时的状态
          ctx.restore()

          ctx.fillStyle = '#333333';
          ctx.font = `bold ${16 * posterSize}px 苹方-简 中粗体`;
          // 绘制直播间名称
          ctx.fillText('直播间名称', 12 * posterSize, 268 * posterSize);
          ctx.font = `${12 * posterSize}px 苹方-简 常规体`;
          ctx.fillText('我是文本内容', 38 * posterSize, 332 * posterSize);
          ctx.fillStyle = '#999999';
          ctx.font = `${10 * posterSize}px 苹方-简 常规体`;
          ctx.fillText('小程序直播', 30 * posterSize, 370 * posterSize);

          // 把当前画布指定区域的内容导出生成指定大小的图片
          wx.canvasToTempFilePath({
            canvas: canvas,
            success: (res) => {
              // 分享给朋友
              wx.showShareImageMenu({
                path: res.tempFilePath,
                success: (resShare: any) => {
                  console.log('showShareImageMenu调用成功：', resShare);
                },
                fail: (err: any) => {
                  console.log('showShareImageMenu调用失败：', err);
                }
              });
            },
            fail: (err) => {
              console.log('canvasToTempFilePath调用失败:', err);
            },
            complete: () => {
              wx.hideLoading();
            },
          });
        })
    } catch (error) {
      wx.hideLoading();
      wx.showToast({
        icon: 'none',
        title: error?.message || '分享失败',
      });
    }
  }
  // 绘制图片
  async createdImg(canvas: any, ctx: any, url: any, position: Array<number>) {
    // 基础库版本必须高于2.27.3，最好低版本兼容，版本太低，提示用户升级到微信最新版本，此处不做处理，可参考文档https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
    const img = canvas.createImage();
    await new Promise((resolve) => {
      img.onload = resolve;
      img.src = url;
    });
    const { posterSize } = this.data
    // 把图片画到canvas 上
    const x = position[0] * posterSize;
    const y = position[1] * posterSize;
    const width = position[2] * posterSize;
    const height = position[3] * posterSize;
    ctx.clearRect(x, y, width, height);
    ctx.drawImage(img, x, y, width, height);
  }

3、.wxss文件

  #myCanvas {
    position: fixed;
    top: -1000rpx;
    left: 0;
  }

1、之所以不用离线画布，是因为canvasToTempFilePath对离线画布支持度不好，安卓正常，ios机读取失败，
参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html