JS生成水印的方法

addWaterMark() {
  const strArr = `${Cookies.get('user_name')}`;
  const name = Cookies.get('user_name')
  let ctx = document.createElement("canvas");
  ctx.width = 120;
  ctx.height = 80;
  ctx.style.display = "none";
  let cans = ctx.getContext("2d");
  cans.rotate((-20 * Math.PI) / 180);
  cans.font = "14px Microsoft YaHei";
  // cans.fillStyle = "rgba(100, 242, 242, 1)";
  cans.fillStyle = "rgba(252, 252, 252, 1)";
  // cans.textAlign = "left";
  // cans.textBaseline = "Middle";
  cans.fillText(strArr, 0, 20);
  cans.save();
  let cans_show = ctx.getContext("2d");
  // cans_show.rotate((-5 * Math.PI) / 180)
  // cans_show.moveTo(50, 50)
  cans_show.font = "14px Microsoft YaHei";
  cans_show.fillStyle = "rgba(242, 242, 242, 1)";
  cans_show.fillText(name, 0, 50);
  cans_show.save();
  return ctx.toDataURL();
}