ユーザーがコンソールを開いてcssを変更できないようにする方法（透かしの削除を防ぐため）

透かしを入れる必要があるのは、取り外しできないようにするためです。したがって、ユーザーがコンソールを開いてcss操作を実行してから、スクリーンショットを撮らないようにする必要があります。
使用されるAPIはwindow.MutationObserverです。
言うまでもありませんが、上記のコードは次のとおりです。

アイデアは、特定の要素の変更のスタイルを監視するときに、スタイルを再度描画できるということです。

const canvasWM = ({
    
    
  container = document.body,
  width = '160px',
  height = '130px',
  textAlign = 'center',
  font = '15px Microsoft Yahei',
  fillStyle = 'rgba(184, 184, 184, 0.6)',
  content = '请勿外传',
  rotate = '30',
  zIndex = 1000,
} = {
    
    }) => {
    
    
  // eslint-disable-next-line no-undef
  const [args] = arguments;
  const canvas = document.createElement('canvas');

  canvas.setAttribute('width', width);
  canvas.setAttribute('height', height);
  const ctx = canvas.getContext('2d');

  ctx.textAlign = textAlign;

  ctx.font = font;
  ctx.fillStyle = fillStyle;
  ctx.rotate(Math.PI / 180 * rotate);
  ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

  const base64Url = canvas.toDataURL();
  const wmInstance = document.querySelector('.__wm');

  const watermarkDiv = wmInstance || document.createElement('div');
  const styleStr = `
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:${
      
      zIndex};
		pointer-events:none;
		background-repeat:repeat;
		background-image:url('${
      
      base64Url}')`;

  watermarkDiv.setAttribute('style', styleStr);
  watermarkDiv.classList.add('__wm');

  if (!wmInstance) {
    
    
    // eslint-disable-next-line no-param-reassign
    container.style.position = 'relative';
    container.insertBefore(watermarkDiv, container.firstChild);
  }

  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  if (MutationObserver) {
    
    
    let mo = new MutationObserver(() => {
    
    
      const wmInstance = document.querySelector('.__wm');
      // 只在wmInstance元素变动才重新调用 canvasWM
      if ((wmInstance && wmInstance.getAttribute('style') !== styleStr) || !wmInstance) {
    
    
        // 避免一直触发
        mo.disconnect();
        mo = null;
        canvasWM(JSON.parse(JSON.stringify(args)));
      }
    });

    mo.observe(container, {
    
    
      attributes: true,
      subtree: true,
      childList: true,
    });
  }
};

export default canvasWM;