微信小程序使用html2canvas

微信小程序是基于小程序框架开发的，小程序的渲染机制和浏览器不同，它只支持部分HTML标签和CSS属性，并且没有完整的DOM和BOM，所以不能直接使用HTML2Canvas库。但是，可以使用微信小程序官方提供的canvas组件，通过canvas API绘制出需要的内容，然后保存为图片。具体实现方法如下：

1. 在wxml文件中添加canvas组件

<canvas canvas-id="myCanvas"></canvas>

2. 在js文件中获取canvas组件上下文，绘制需要的内容

// 获取canvas上下文
const ctx = wx.createCanvasContext('myCanvas')

// 绘制文本
ctx.setFillStyle('#333')
ctx.setFontSize(16)
ctx.fillText('Hello World', 10, 20)

// 绘制图片
ctx.drawImage('/images/avatar.png', 20, 50, 50, 50)

// 绘制完成后保存为图片
ctx.draw(false, () => {
  wx.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success: (res) => {
      console.log(res.tempFilePath)
    }
  })
})

3. 如果需要绘制HTML内容，可以先将HTML转换为canvas可识别的格式，例如使用html2canvas将HTML转换为canvas，然后再将canvas绘制到小程序的canvas组件上。

import html2canvas from 'html2canvas'

// 将HTML转换为canvas
html2canvas(document.querySelector('#myHtml')).then((canvas) => {
  // 绘制canvas
  const ctx = wx.createCanvasContext('myCanvas')
  ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height)
  ctx.draw(false, () => {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: (res) => {
        console.log(res.tempFilePath)
      }
    })
  })
})

注意：html2canvas库并不是官方提供的库，需要通过npm安装后引入使用。另外，小程序的canvas组件有大小限制，最大宽度不能超过2000px，最大高度不能超过2000px，超过限制会导致绘制失败。