utils.js

export function getWatermarkCanvasImg(width, height, text, image) {
  const canvas = document.createElement('canvas');
  //  若不设置宽、高，无法渲染内容
  canvas.width = width;
  canvas.height = height;
  // canvas.height = this.height - 40; // 40为底部工具条
  canvas.className = 'watermark';
  console.log('createCanvas', canvas);

  // 获取 Canvas 上下文
  const ctx = canvas.getContext('2d');

  // 在 Canvas 上绘制原始图片
  if (image) {
    ctx.drawImage(image, 0, 0);
  }

  // 绘制水印文本
  ctx.font = '24px Arial';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';

  // 定义水印内容
  const watermarkText = text;

  // 定义水印间隔和边距
  // TODO: 未兼容移动端
  const watermarkIntervalX = 220; // 水印之间的水平间隔
  const watermarkIntervalY = 220; // 水印之间的垂直间隔
  const watermarkMarginX = 50; // 水印距离左边的边距
  const watermarkMarginY = 180; // 水印距离顶部的边距

  // 循环绘制水印
  for (let x = watermarkMarginX; x < canvas.width; x += watermarkIntervalX) {
    for (let y = watermarkMarginY; y < canvas.height; y += watermarkIntervalY) {
      // 保存当前绘图状态以便恢复
      ctx.save();

      // 将坐标原点移动到水印位置
      ctx.translate(x, y);

      // 旋转文本
      ctx.rotate(-Math.PI / 4); // 旋转-45度（以弧度表示）

      // 绘制水印文本
      ctx.fillText(watermarkText, 0, 0);

      // 恢复绘图状态
      ctx.restore();
    }
  }

  return canvas;
  // return canvas.toDataURL('image/png');
}