html2canvas页面生成图片并添加水印

好的，我来为你解答。首先，需要使用html2canvas库将页面生成为一张图片。然后，可以使用Canvas API在图片上添加水印。

下面是一个简单的示例代码：

// 使用html2canvas生成图片
html2canvas(document.body).then(canvas => {
  // 创建一个新的Canvas元素
  const newCanvas = document.createElement('canvas');
  newCanvas.width = canvas.width;
  newCanvas.height = canvas.height;

  // 在新的Canvas上绘制原始图片
  const ctx = newCanvas.getContext('2d');
  ctx.drawImage(canvas, 0, 0);

  // 添加水印
  ctx.font = '20px Arial';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.fillText('水印文字', 10, 50);

  // 将新的Canvas转换为图片并显示
  const newImg = new Image();
  newImg.src = newCanvas.toDataURL('image/png');
  document.body.appendChild(newImg);
});

这段代码使用html2canvas生成当前页面的图片，然后创建一个新的Canvas元素，并在上面绘制原始图片和水印。最后，将新的Canvas转换为图片并添加到页面中。

需要注意的是，由于涉及到跨域问题，如果生成的图片和水印涉及到跨域资源的话，需要对图片和水印所在的服务器进行CORS设置。