canvas 实现水印功能-526互联

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body id="waterWrapper">
    <canvas id="canvas"></canvas>

  <script>
  function drawWaterPrint(){
    const canvas = document.getElementById('canvas');
    canvas.width = 200;
    canvas.height = 200;
    canvas.style.display = 'none';  
    const ctx = canvas.getContext('2d');
    ctx.font ='16px Microsoft JhengHei';
    ctx.fillStyle ='rgba(0,0,0,.3)';
    ctx.rotate(-0.3) ;
    ctx.fillText('大东在路上',canvas.width / 8,canvas.height / 4);
    // ctx.fillText('大东在路上',20,20);

    const img = canvas.toDataURL('image/png' )
    const style =`background-image:url(${img})`
    if(style !== waterWrapper.style){
      waterWrapper.setAttribute( 'style',style);
    }
  }

  drawWaterPrint()

  function callback(){
      drawWaterPrint()
  }
  const observer = new MutationObserver(callback)
  const targetNode = waterWrapper // 监听节点
  const config = {attributes : true} // 监听属性
  observer.observe(targetNode,config)



  </script>
  
</body>
</html>