微信小程序 js截取页面某个内容生成图片组件

微信小程序提供了canvas组件用来实现页面的绘制和生成图片功能。在js中，可以通过调用canvas组件的绘制API，将页面某个内容绘制到canvas上，再通过canvas的toTempFilePath方法将canvas内容生成为图片。

首先，在.wxml文件中定义一个canvas组件：

<canvas id="myCanvas" canvas-id="canvas" style="width: 300px; height: 300px;"></canvas>

在.js文件中，通过获取页面中需要截取的内容，然后将其绘制到canvas上，并生成图片。具体代码如下：

// 获取页面中的某个DOM节点
const query = wx.createSelectorQuery()
query.select('#content').boundingClientRect() // 这里的#content是你需要截取的内容所在的DOM节点的选择器
query.exec((res) => {
  // 获取到节点的信息
  const rect = res[0]
  const canvasContext = wx.createCanvasContext('canvas')

  // 设置canvas的宽高
  const canvasWidth = 300 // canvas的宽度，根据需要设置
  const canvasHeight = 300 // canvas的高度，根据需要设置
  const dpr = wx.getSystemInfoSync().pixelRatio // 获取设备的像素比

  // 将canvas的宽高乘以像素比，使得生成的图片更加清晰
  canvasContext.canvas.width = canvasWidth * dpr
  canvasContext.canvas.height = canvasHeight * dpr

  // 根据节点信息进行绘制
  canvasContext.drawImage(rect.left * dpr, rect.top * dpr, rect.width * dpr, rect.height * dpr, 0, 0, canvasWidth * dpr, canvasHeight * dpr)

  // 绘制完成后，调用toTempFilePath方法生成图片
  canvasContext.draw(false, () => {
    wx.canvasToTempFilePath({
      quality: 1,
      canvasId: 'canvas',
      fileType: 'jpg',
      success(res) {
        // 生成图片成功后的回调函数
        console.log(res.tempFilePath)
      },
      fail(error) {
        // 生成图片失败后的回调函数
        console.log(error)
      }
    })
  })
})

以上代码中，我们使用了wx.createSelectorQuery方法来获取页面中需要截取的DOM节点的信息。然后，通过canvasContext.drawImage方法将该节点绘制到canvas上。最后，调用canvasContext.draw方法进行绘制，并在完成后调用canvasToTempFilePath方法生成图片。生成图片成功后，可以在success回调函数中获取到生成的图片路径，可以使用这个路径进行其他操作。

需要注意的是，canvas组件的绘制是异步的，如果要在绘制完成后进行其他操作，需要在回调函数中进行。同时，生成的图片会保存在临时文件中，在不需要时要进行清理，防止占用设备空间。