元素添加水印機能の実装

ウェブ開発において、水印はコンテンツを保護するための一般的な方法です。水印を追加することで、無許可のユーザーによるコンテンツの盗用を効果的に防ぐことができます。本記事では、カスタムディレクティブを使用して要素に水印を追加し、盗用防止機能を実現する方法を紹介します。

実現思路#

Canvas を使用して水印画像を生成：
- まず、canvas要素を作成し、ターゲット要素の幅と高さに基づいてそのサイズを設定します。
- CanvasRenderingContext2DのfillTextメソッドを使用して、水印のテキストをキャンバスに描画します。
- 水印の傾斜角度と間隔を調整することで、より柔軟な水印効果を実現します。
生成した画像を背景に設定：
- canvas.toDataURL("image/png")を使用してキャンバスの内容を Base64 形式の画像に変換し、それをターゲット要素の背景として設定します。
MutationObserver を使用して DOM の変動を監視：
- ユーザーが DOM を変更して水印を削除するのを防ぐために、MutationObserverを使用してターゲット要素の属性の変化を監視します。
- 属性の変化（例えばstyleやid）が検出されると、水印の設定を復元します。
盗用防止機能：
- DOM の変化を監視することで、水印が常にターゲット要素に存在することを保証し、コンテンツの保護を強化します。

具体実装コード#

以下は水印機能を実現する TypeScript コードです：

/**
 * @param text  水印文字
 * @param font  水印字体
 * @param color 水印颜色
 * @param deg   水印倾斜角度，负数上坡正数下坡
 * @param gap   相邻两个水印的间距
 */

const config = {
  attributes: true,
  attributeOldValue: true,
  attributeFilter: ["class", "id", "style"],
  characterData: true,
  childList: true,
  subtree: true,
  characterDataOldValue: true,
};

function addWaterfall(
  el,
  {
    text = "私は水印です",
    font = "bold 18px STHeiti",
    color = "rgba(180,180,180,0.8)",
    deg = -30,
    gap = 200,
  }
) {
  const ob = new MutationObserver(changeOb);

  function beginWatch() {
    ob.observe(el, config);
  }

  function stopWatch() {
    ob.disconnect();
  }

  function changeOb(mutationList) {
    stopWatch();
    console.log("DOMが変更されました");
    mutationList.forEach((mutation) => {
      switch (mutation.type) {
        case "attributes": {
          const attr = mutation.attributeName;
          if (attr === "style") {
            mutation.target.style = mutation.oldValue;
          } else if (attr === "id") {
            mutation.target.id = mutation.oldValue;
          }
        }
      }
    });
    beginWatch();
  }

  function createWaterfall() {
    stopWatch();
    const box_w = parseFloat(document.defaultView.getComputedStyle(el).width);
    const box_h = parseFloat(document.defaultView.getComputedStyle(el).height);
    const canvas = document.createElement("canvas");
    canvas.id = "canvas";
    canvas.width = box_w;
    canvas.height = box_h;
    const ctx = canvas.getContext("2d");
    ctx.rotate((deg * Math.PI) / 180);
    ctx.font = font;
    ctx.fillStyle = color;
    ctx.textBaseline = "middle";

    const MAX_NUM = parseInt(Math.max(box_w, box_h) / gap) + 1;
    const LEFT = Math.floor((MAX_NUM / Math.sqrt(2)) * -1);
    const RIGHT = Math.ceil(MAX_NUM + MAX_NUM / Math.sqrt(2));

    for (let i = LEFT; i <= RIGHT; i++) {
      for (let j = LEFT; j <= RIGHT; j++) {
        ctx.fillText(text, gap * i, gap * j);
      }
    }
    el.style.background = `url(${canvas.toDataURL("image/png")})`;
    beginWatch();
  }

  return createWaterfall;
}

export default addWaterfall;

使用例#

<div v-waterfall="{ text: 'これは水印です', }" </div>

まとめ#

以上の方法を通じて、ウェブ要素に水印を簡単に追加し、一定の盗用防止を実現できます。この方法はシンプルで使いやすく、ニーズに応じて水印のスタイルや位置を調整する柔軟性も備えています。この文章があなたのプロジェクトで水印機能を実現するのに役立つことを願っています。

この記事は Mix Space によって xLog に同期更新されました。元のリンクは http://www.sroxck.top/posts/fontend/waterfall