html2canvs如何添加水印到图片上面去

要使用 html2canvas 添加水印到图片上，你可以先创建一个 canvas 元素，然后将水印文本绘制到该 canvas 上，再使用 html2canvas 将该 canvas 转换成图片，最后将水印图片叠加在原始图片上即可。

以下是一个示例代码：

// 创建 canvas 元素
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;

// 在 canvas 上绘制水印文本
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.fillText('Watermark', 10, 50);

// 使用 html2canvas 将 canvas 转换成图片
html2canvas(canvas).then(function (canvas) {
  // 将水印图片叠加在原始图片上
  var watermarkImg = new Image();
  watermarkImg.src = canvas.toDataURL();
  watermarkImg.onload = function () {
    var ctx = imgCanvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    ctx.drawImage(watermarkImg, 0, 0);
  };
});

在上面的代码中，`img` 表示原始图片，`imgCanvas` 表示存放最终图片的 canvas 元素。你可以根据自己的需求修改水印文本的内容、字体、颜色、透明度等参数。