有没有一种在纯javascript中创建文本水印的方法？

Question

我想要创建和添加文字水印到网页。它应该用纯javascript创建。

编辑：

解释：以当前页面为例，我希望我能在页面中间显示半透明文本"STACKOVERFLOW“。

Answer 1

使用纯JS制作水印很长，但使用jQuery更容易：

$(document).ready(function(){
  var Html = "<div id='myDiv'>My Watermark</div>";
  $("body").append(Html);

  $("#myDiv").css({
    "color":"#bbb","font-size":"100px",
    "position":"absolute","top":"0px","left":"0px",
    "z-index":"-1","transform":"rotate(45deg)"
  });
});

看看这个小玩意：http://jsfiddle.net/jondinham/agz5tytb/

使用纯JavaScript，这会更加困难，因为在旧浏览器中，“transform”css不是一个标准。不管怎样，这样做是可以的：

var div = document.createElement("div");
document.getElementsByTagName("body")[0].appendChild(div);

div.innerHTML = "My Watermark";
div.style.color = "#bbb";
div.style.fontSize = "100px";
div.style.position = "absolute";
div.style.top = "0px";
div.style.left = "0px";
div.style.zIndex = "-1";

div.style.transform = "rotate(45deg)"; //standard
div.style.msTransform = "rotate(45deg)"; //IE
div.style.mozTransform = "rotate(45deg)"; //Firefox
div.style.webkitTransform = "rotate(45deg)"; //Chrome
div.style.oTransform = "rotate(45deg)"; //Opera

参见jsfiddle：http://jsfiddle.net/jondinham/7fqg9n6w/

Answer 2

https://codepen.io/emrahaydemir/pen/OJZYwYz

async function addWatermarkToImage(file) {
  return new Promise(async (resolve, reject) => {
    const image = await fileToDataURL(file);
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
    const fontSize =
      (canvas.width + canvas.height) / ctx.measureText(text).width;
    ctx.font = fontSize + "px verdana";
    const textSize = ctx.measureText(text);
    ctx.globalAlpha = watermarkOpacity;
    ctx.fillStyle = waterMarkColor;
    ctx.textAlign = "center";
    let startY = -canvas.height / 2;
    let startX = -canvas.width / 2;
    const xGap = canvas.width * 0.07;
    const yGap = canvas.height * 0.07;
    for (let index = 0; startX < canvas.width; index++) {
      for (let yIndex = 0; startY < canvas.height; index++) {
        ctx.strokeText(text, startX, startY);
        startY += fontSize + yGap;
      }
      startY = 0;
      startX += textSize.width + xGap;
    }
    resolve(canvas.toDataURL());
  });
}