js html2canvas添加水印

HTML2Canvas是一个JavaScript库，它能将整个网页渲染成图片，常用于需要导出网页内容为PDF或图片的场景。如果你想在使用HTML2Canvas生成图片时添加水印，可以按照以下步骤操作：

1. 首先，你需要引入HTML2Canvas库和处理字体的库，例如`fontkit`或`puppeteer`，因为默认的HTML2Canvas可能不包含所有字体支持。

const html2canvas = require('html2canvas');
const fs = require('fs');
const { createCanvas } = require('canvas');
const { loadFont } = require('fontkit');

2. 安装并加载自定义字体，如果需要的话：

loadFont('path/to/font.ttf')
.then(font => {
  // 现在可以在绘制时使用这个字体
})
.catch(err => console.error(err));

3. 在HTML2Canvas的`render()`函数调用之前，创建一个canvas元素，并在上面绘制水印：

async function addWatermarkToImage(url, watermarkText) {
  try {
    const img = await html2canvas(document.querySelector(url), {
      onclone: function (doc) {
        doc.body.style.fontSize = '14px'; // 设置字体大小
        doc.body.appendChild(createCanvasElement()); // 添加一个临时canvas用于水印
      },
      onrendered: function(canvas) {
        const ctx = canvas.getContext('2d');
        
        // 创建一个带颜色和透明度的文本路径
        ctx.font = '14px Arial';
        ctx.fillStyle = '#000000'; // 黑色
        ctx.globalAlpha = 0.5; // 设置透明度
        ctx.fillText(watermarkText, 10, canvas.height - 10); // 水印位置

        // 将水印画到原图上
        const watermark = canvas.toDataURL();
        // 使用图像数据替换原始图像的透明部分
        // 这里假设你已经有了一个image对象或者base64字符串
        img.src = applyWatermark(img.src, watermark);
      }
    });

    // 渲染后的结果通常是一个Promise，处理完后返回img对象
    return img;
  } catch (error) {
    console.error(error);
  }
}

// 使用方法示例：
addWatermarkToImage('#your-image-selector', 'Your Watermark').then(result => {
  // 保存图片或者做其他处理
});

在这个例子中，我们添加了一个透明的黑色文字水印，然后将其合并到原始图片上。注意，这只是一个基本示例，实际应用中你可能需要调整水印的位置、字体样式、颜色和透明度等。