フロントエンドがウォーターマークをどのように実装しているかご存知ですか?

日々の業務では、多くの機密データに遭遇することがよくありますが、データ漏洩を防ぐために、データを「パッケージ化」する必要があります。その目的は、データ漏洩に興味を持つ「犯罪分子」に厳しい「世論の圧力」の下で違法行為を断念させ、戦わずして他者を打ち負かす効果を達成する「犯罪未遂」をさせることである。

セキュリティ部門で働く私たちにとって、データセキュリティの概念は長い間根付いており、すべての言葉、すべての写真に漏洩のリスクがあるかどうかを念頭に置く必要があります。データ漏洩は私たちがずっと考えてきた問題です。たとえば、写真の透かしは、仕事の過程でよく遭遇する問題です。私の仕事内容がレビュープラットフォームの開発であるため、レビュープラットフォームには危険な画像が掲載されることが多いのですが、レビュー担当者のセキュリティ意識にばらつきがあることを考慮すると、危険なことが起こらないように画像にウォーターマークを入れる必要があります。 。 の。

問題点の分析

まず、ビジネスシナリオを考慮すると、現段階での問題はレビュープロセス中のデータ漏洩を心配することだけであり、当面は明示的な透かしのみを考慮します。また、個人を特定するテキストやその他のデータを画像に追加することもできます。このようにして、漏洩したデータに基づいて個人を追跡することができますが、その最も重要な役割は、トラブルを事前に予防することであることは言うまでもありません。

問題の解決策

実装方法

ウォーターマークを実装するには多くの方法があり、フロントに分けられます。 -エンド ウォーターマークとバックエンド ウォーターマーク フロントエンド ウォーターマークの利点は 3 点に要約できます。第一に、サーバー リソースを占有せず、クライアントの計算能力に完全に依存するため、サーバーへの負荷が軽減されます。次に、高速であるため、どのフロントエンド実装を実装しても、パフォーマンスはバックエンドよりも優れています。第三に、実装が簡単です。バックエンドにウォーターマークを実装する最大のメリットも、安全・安心・安全の3点に集約されます。 Zhihu と Weibo はどちらもバックエンドの透かしソリューションを使用しています。ただし、総合的な検討の結果、透かしを実装するためにフロントエンド ソリューションを引き続き採用します。以下では、nodejs がバックエンド画像透かしを実装する方法についても簡単に紹介します。

ノード実装

3 つの npm パッケージを提供します。この部分はこの記事の焦点では​​なく、簡単なデモのみが提供されます。

1、gm https://github.com/aheckmann/gm 6.4k star

const fs = require('fs');
const gm = require('gm');


gm('/path/to/my/img.jpg')
.drawText(30, 20, "GMagick!")
.write("/path/to/drawing.png", function (err) {
  if (!err) console.log('done');
});

GraphicsMagick または ImageMagick をインストールする必要があります;

2、node-images: https : //github.com/zhangyuanwei/node-images

const wrap = document.querySelector('#ReactApp');
const { clientWidth, clientHeight } = wrap;
const waterHeight = 120;
const waterWidth = 180;
// 计算个数
const [columns, rows] = [~~(clientWidth / waterWidth), ~~(clientHeight / waterHeight)]
for (let i = 0; i < columns; i++) {
    for (let j = 0; j <= rows; j++) {
        const waterDom = document.createElement(&#39;div&#39;);
        // 动态设置偏移值
        waterDom.setAttribute(&#39;style&#39;, `
            width: ${waterWidth}px; 
            height: ${waterHeight}px; 
            left: ${waterWidth + (i - 1) * waterWidth + 10}px;
            top: ${waterHeight + (j - 1) * waterHeight + 10}px;
            color: #000;
            position: absolute`
        );
        waterDom.innerText = &#39;测试水印&#39;;
        wrap.appendChild(waterDom);
    }
}

他のツールをインストールする必要はありません、軽量、zhangyuanwei によって開発されました、中国語、中国語ドキュメント;

3、jimp: https:// github .com/oliver-moran/jimp

を gifwrap とともに使用して gif ウォーターマークを実装できます;

フロントエンド実装

1、背景全画面ウォーターマークを実現する画像

アリババ内外の個人情報ページで効果を確認できます

#利点: 画像はバックエンドによって生成され、安全です;

欠点: 画像情報を取得するには http リクエストを開始する必要があります。

エフェクト表示: 内部システムであるため、エフェクトを表示するのは不便です。

2、DOM は画像全体のウォーターマークと画像ウォーターマークを実装します。

画像の onload イベントで画像の幅と高さを取得し、画像サイズに応じてウォーターマーク領域を生成し、それをブロックします。 DOM コンテンツには透かしが入れられます。コピーライティングやその他の情報は、比較的簡単な方法で実装できます。

const wrap = document.querySelector('#ReactApp');
const { clientWidth, clientHeight } = wrap;
const waterHeight = 120;
const waterWidth = 180;
// 计算个数
const [columns, rows] = [~~(clientWidth / waterWidth), ~~(clientHeight / waterHeight)]
for (let i = 0; i < columns; i++) {
    for (let j = 0; j <= rows; j++) {
        const waterDom = document.createElement(&#39;p&#39;);
        // 动态设置偏移值
        waterDom.setAttribute(&#39;style&#39;, `
            width: ${waterWidth}px; 
            height: ${waterHeight}px; 
            left: ${waterWidth + (i - 1) * waterWidth + 10}px;
            top: ${waterHeight + (j - 1) * waterHeight + 10}px;
            color: #000;
            position: absolute`
        );
        waterDom.innerText = &#39;测试水印&#39;;
        wrap.appendChild(waterDom);
    }
}

利点: シンプルで実装が簡単;

欠点: 画像が大きすぎる、または多すぎるとパフォーマンスに影響します;

3、キャンバスの実装方法 (最初のバージョンの実装計画)

方法 1: 画像を直接操作する

これ以上ナンセンスではなく、コードにアクセスするだけです

useEffect(() => {
      // gif 图不支持
    if (src && src.includes('.gif')) {
      setShowImg(true);
    }
    image.onload = function () {
      try {
        // 太小的图不加载水印
        if (image.width < 10) {
          setIsDataError(true);
          props.setIsDataError && props.setIsDataError(true);
          return;
        }
        const canvas = canvasRef.current;
        canvas.width = image.width;
        canvas.height = image.height;
        // 设置水印
        const font = `${Math.min(Math.max(Math.floor(innerCanvas.width / 14), 14), 48)}px` || fontSize;
        innerContext.font = `${font} ${fontFamily}`;
        innerContext.textBaseline = &#39;hanging&#39;;
        innerContext.rotate(rotate * Math.PI / 180);
        innerContext.lineWidth = lineWidth;
        innerContext.strokeStyle = strokeStyle;
        innerContext.strokeText(text, 0, innerCanvas.height / 4 * 3);
        innerContext.fillStyle = fillStyle;
        innerContext.fillText(text, 0, innerCanvas.height / 4 * 3);
        const context = canvas.getContext(&#39;2d&#39;);
        context.drawImage(this, 0, 0);
        context.rect(0, 0, image.width || 200, image.height || 200);
           // 设置水印浮层
        const pattern = context.createPattern(innerCanvas, &#39;repeat&#39;);
        context.fillStyle = pattern;
        context.fill();
      } catch (err) {
        console.info(err);
        setShowImg(true);
      }
    };
    image.onerror = function () {
      setShowImg(true);
    };
  }, [src]);

利点: 純粋なフロントエンド実装、画像は右からコピーされます。クリックするとウォーターマークも表示されます。;

欠点: GIF はサポートされていません。画像はクロスドメインをサポートする必要があります。;

効果の表示: 以下に示します。

方法 2: キャンバスはウォーターマーク URL を生成し、それを CSS 背景属性に割り当てます

export const getBase64Background = (props) => {
  const { nick, empId } = GlobalConfig.userInfo;
  const {
    rotate = -20,
    height = 75,
    width = 85,
    text = `${nick}-${empId}`,
    fontSize = '14px',
    lineWidth = 2,
    fontFamily = 'microsoft yahei',
    strokeStyle = 'rgba(255, 255, 255, .15)',
    fillStyle = 'rgba(0, 0, 0, 0.15)',
    position = { x: 30, y: 30 },
  } = props;
  const image = new Image();
  image.crossOrigin = 'Anonymous';
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  context.font = `${fontSize} ${fontFamily}`;
  context.lineWidth = lineWidth;
  context.rotate(rotate * Math.PI / 180);
  context.strokeStyle = strokeStyle;
  context.fillStyle = fillStyle;
  context.textAlign = 'center';
  context.textBaseline = 'hanging';
  context.strokeText(text, position.x, position.y);
  context.fillText(text, position.x, position.y);
  return canvas.toDataURL('image/png');
};

// 使用方式 
<img src="https://xxx.xxx.jpg" />
<p className="warter-mark-area" style={{ backgroundImage: `url(${getBase64Background({})})` }} />

利点: 純粋なフロントエンド実装、クロスドメインのサポート、git 画像ウォーターマークのサポート;

# #欠点: 生成 Base64 URL は比較的大きい;

実際、これら 2 つのキャンバスの実装に基づいて、3 番目の方法を簡単に思いつくことができます。最初の方法では、画像以外のキャンバスを使用して画像を使用するため、両方のオプションの欠点が完全に回避されます。しかし、少し立ち止まって考えてみてください。2 つのソリューションを組み合わせて、キャンバスを使用して描画する、よりシンプルで簡単な方法はないだろうか?はい、代わりに svg を使用してください。

4、SVG メソッド (使用されているソリューション)

ウォーターマーク コンポーネントの反応バージョンを提供します。

export const WaterMark = (props) => {
  // 获取水印数据
  const { nick, empId } = GlobalConfig.userInfo;
  const boxRef = React.createRef();
  const [waterMarkStyle, setWaterMarkStyle] = useState('180px 120px');
  const [isError, setIsError] = useState(false);
  const {
    src, text = `${nick}-${empId}`, height: propsHeight, showSrc, img, nick, empId
  } = props;
  // 设置背景图和背景图样式
  const boxStyle = {
    backgroundSize: waterMarkStyle,
    backgroundImage: `url("data:image/svg+xml;utf8,<svg width=\&#39;100%\&#39; height=\&#39;100%\&#39; xmlns=\&#39;http://www.w3.org/2000/svg\&#39; version=\&#39;1.1\&#39;><text width=\&#39;100%\&#39; height=\&#39;100%\&#39; x=\&#39;20\&#39; y=\&#39;68\&#39;  transform=\&#39;rotate(-20)\&#39; fill=\&#39;rgba(0, 0, 0, 0.2)\&#39; font-size=\&#39;14\&#39; stroke=\&#39;rgba(255, 255, 255, .2)\&#39; stroke-width=\&#39;1\&#39;>${text}</text></svg>")`,
  };
  const onLoad = (e) => {
    const dom = e.target;
    const {
      previousSibling, nextSibling, offsetLeft, offsetTop,
    } = dom;
    // 获取图片宽高
    const { width, height } = getComputedStyle(dom);
    if (parseInt(width.replace(&#39;px&#39;, &#39;&#39;)) < 180) {
      setWaterMarkStyle(`${width} ${height.replace(&#39;px&#39;, &#39;&#39;) / 2}px`);
    };
    previousSibling.style.height = height;
    previousSibling.style.width = width;
    previousSibling.style.top = `${offsetTop}px`;
    previousSibling.style.left = `${offsetLeft}px`;
    // 加载 loading 隐藏
    nextSibling.style.display = &#39;none&#39;;
  };
  const onError = (event) => {
    setIsError(true);
  };
  return (
    <p className={styles.water_mark_wrapper} ref={boxRef}>
      <p className={styles.water_mark_box} style={boxStyle} />
      {isError
        ? <ErrorSourceData src={src} showSrc={showSrc} height={propsHeight} text="图片加载错误" helpText="点击复制图片链接" />
        : (
          <>
            <img onLoad={onLoad} referrerPolicy="no-referrer" onError={onError} src={src} alt="图片显示错误" />
            <Icon className={styles.img_loading} type="loading" />
          </>
        )
      }
    </p>
  );
};

利点: gif ウォーターマークをサポート、クロスドメインの問題なし、repeat 属性の使用、dom プロセスへの挿入なし、パフォーマンスの問題なし;

QA

質問 1:

ウォーターマークの dom を削除すると、画像にはウォーターマークが表示されなくなりますか?

回答:

MutationObserver を使用して水ノードを監視できます。ノードが変更されると、画像が非表示になります。

質問 2:

マウスの右クリック 画像をコピーしますか?

回答:

すべての画像で右クリック機能が無効になっています

質問 3:

画像情報がネットワークから取得された場合はどうなりますか?コンソールは？

回答:

この操作に適したソリューションはまだありません。バックエンド実装ソリューションを使用することをお勧めします。

概要

フロントエンドに実装されたウォーターマーク ソリューションは常に一時的なソリューションにすぎず、ビジネス バックエンドの実装はサーバー リソースを消費します。実際、最も理想的なソリューションは、独立したウォーターマーク サービスです。ロード処理に若干の遅延が発生しますが、データ セキュリティと比較すると、ミリ秒レベルの遅延は許容できるため、ビジネスのサービスの安定性には影響しません。

毎日の Q&A プロセス中に、多くのビジネス関係者が私のところに来て、ウォーターマーク ブロックのリスク ポイントについて議論します。私は毎回、データ セキュリティの重要性について答えることしかできません。もちろん、データのサイズはウォーターマーク、透明度、濃度も継続的に最適化されており、ウォーターマークとして機能するだけでなく、オクルージョンの問題もより良く解決できるバージョンが登場すると思います。

推奨学習: html ビデオ チュートリアル

以上がフロントエンドがウォーターマークをどのように実装しているかご存知ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。