// 创建画布
function createCanvas(width, height) {
  // 创建一个画布
  let canvas = document.createElement('canvas');
  // 设置画布的宽高
  canvas.width = width;
  canvas.height = height;

  return {
    canvas,
    ctx: canvas.getContext('2d')
  };
}

// 填充水印
function fillMark(canvas, html) {
  html.style.pointerEvents = 'none';
  html.style.background =
    'url(' + canvas.toDataURL('image/png') + ') left top repeat';
}

// 文字水印生成
export function watermarkText(html, str, options = {}) {
  let {
    fontSize = 18, // 设置字体大小
    fontFamily = 'Vedana', // 设置字体
    width = str.length * fontSize, // 设置画布的宽
    height = 320, // 设置画布的高
    color = 'rgba(0, 0, 0, 0.3)', // 设置填充绘画的颜色/渐变模式
    angle = -25, // 旋转角度
    textAlign = 'left', // 设置文本内容的对齐方式
    font, // 设置字体及大小
    textBaseline = 'Middle', // 设置文本基线
    start = 0, // 开始绘制文本的X坐标位置
    end = height / 1.2 // 开始绘制文本的Y坐标位置
  } = options;

  // 创建画布
  let cans = createCanvas(width, height);
  let canvas = cans.canvas;
  let ctx = cans.ctx;
  ctx.rotate((angle * Math.PI) / 180);
  ctx.font = font || fontSize + 'px ' + fontFamily;
  ctx.fillStyle = color;
  ctx.textAlign = textAlign;
  ctx.textBaseline = textBaseline;
  // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
  ctx.fillText(str, start, end);
  // 填充水印
  fillMark(canvas, html);
}

// 图片水印生成
export function watermarkImg(html, options = {}) {
  let {
    width = 200, // 设置画布的宽
    height = 120, // 设置画布的高
    angle = -25, // 旋转角度
    x = 0, // 放置图像的x坐标
    y = height / 1.5, // 放置图像的y坐标
    src = '' // 图片地址
  } = options;

  // 创建画布
  let cans = createCanvas(width, height);
  let canvas = cans.canvas;
  let ctx = cans.ctx;
  ctx.rotate((angle * Math.PI) / 180);
  let img = new Image(); // 创建图片
  img.onload = function (e) {
    // 监听图片加载完成
    ctx.drawImage(img, x, y, this.width, this.height);
    // 填充水印
    fillMark(canvas, html);
  };
  img.src = src;
}

export class SvgWay {
  constructor(watermark) {
    this.watermark = watermark;
  }

  render() {
    const { txt, x, y, width, height, color, font, fontSize, alpha, angle } =
      this.watermark;
    const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px">
                <text x="${x}px" y="${y}px" dy="${fontSize}px"
                    text-anchor="start"
                    stroke="${color}"
                    stroke-opacity="${alpha}"
                    fill="none"
                    transform="rotate(${angle},${x} ${y})"
                    font-weight="100"
                    font-size="${fontSize}"
                    font-family="${font}"
                    >
                    ${txt}
                </text>
            </svg>`;
    return `data:image/svg+xml;base64,${window.btoa(
      unescape(encodeURIComponent(svgStr))
    )}`;
  }
}

export class CanvasWay {
  constructor(watermark) {
    this.watermark = watermark;
    const { width, height } = watermark;
    this.canvas = document.createElement('canvas');
    this.canvas.setAttribute('width', width);
    this.canvas.setAttribute('height', height);
  }

  render() {
    const { txt, x, y, width, height, font, color, fontSize, alpha, angle } =
      this.watermark;
    const ctx = this.canvas.getContext('2d');
    ctx.clearRect(0, 0, width, height);
    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.fillStyle = color;
    ctx.globalAlpha = alpha;
    ctx.font = `${fontSize}px ${font}`;
    ctx.translate(x, y);
    ctx.rotate((Math.PI / 180) * angle);
    ctx.translate(-x, -y - fontSize);
    ctx.fillText(txt, x, y + fontSize);
    return this.canvas.toDataURL();
  }
}
