JS 添加自定义文字水印

//创建水印方法
function addWatermark(text) {
   const watermarkDiv = document.createElement('div');
   watermarkDiv.id = 'dynamic-watermark';
   watermarkDiv.style.position = 'fixed';
   watermarkDiv.style.top = '0';
   watermarkDiv.style.left = '0';
   watermarkDiv.style.width = '100%';
   watermarkDiv.style.height = '100%';
   watermarkDiv.style.pointerEvents = 'none';
   watermarkDiv.style.zIndex = '9999';
   watermarkDiv.style.backgroundImage = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" opacity="0.05"><text x="50%" y="50%" font-size="20" fill="black" transform="rotate(-30 100 50)" text-anchor="middle" dominant-baseline="middle">${encodeURIComponent(text)}</text></svg>')`;
   watermarkDiv.style.backgroundRepeat = 'repeat';
   document.body.appendChild(watermarkDiv);
}

//直接调用创建水印
addWatermark('水印文字');

// 移除水印
function removeWatermark() {
   const watermark = document.getElementById('dynamic-watermark');
   if (watermark) {
       document.body.removeChild(watermark);
   }
}

//如果报错，使用以下方法试试
document.addEventListener('DOMContentLoaded', function() {
      const watermarkDiv = document.createElement('div');
      watermarkDiv.id = 'dynamic-watermark';
      watermarkDiv.style.position = 'fixed';
      watermarkDiv.style.top = '0';
      watermarkDiv.style.left = '0';
      watermarkDiv.style.width = '100%';
      watermarkDiv.style.height = '100%';
      watermarkDiv.style.pointerEvents = 'none';
      watermarkDiv.style.zIndex = '9999';
      watermarkDiv.style.backgroundImage = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" opacity="0.05"><text x="50%" y="50%" font-size="20" fill="black" transform="rotate(-30 100 50)" text-anchor="middle" dominant-baseline="middle">${encodeURIComponent('水印文字')}</text></svg>')`;
      watermarkDiv.style.backgroundRepeat = 'repeat';
      document.body.appendChild(watermarkDiv);
});