프런트엔드에서 워터마킹을 어떻게 구현하는지 아시나요?

일상 업무에서 우리는 민감한 데이터를 많이 접하게 되는데, 데이터 유출을 방지하기 위해 데이터에 대한 '패키징' 작업이 필요합니다. 데이터 유출에 관심이 있는 '범죄자들'이 극심한 '여론의 압박' 속에서 불법행위를 포기하고, 싸우지 않고 남을 물리치는 효과를 얻으려는 '범죄적 시도'를 하게 만드는 것이 목적이다.

보안 부서에 근무하는 우리들에게는 데이터 보안에 대한 개념이 이미 몸속에 깊이 자리잡고 있습니다. 텍스트와 사진 하나하나에 데이터 유출 위험이 있는지를 염두에 두는 것이 중요합니다. 우리가 생각해 왔던 질문입니다. 예를 들어, 사진의 워터마크는 작업 과정에서 자주 접하게 되는 문제입니다. 제가 하는 업무의 내용이 리뷰 플랫폼 개발이기 때문에 리뷰 플랫폼에 위험한 그림이 자주 나타나는 경우가 있는데, 리뷰어들의 보안 인식이 고르지 못한 점을 고려하여 불안전한 일이 발생하지 않도록 워터마크를 추가하는 것이 필요합니다. 사진.

문제 분석

우선 비즈니스 시나리오를 고려하면 현 단계의 문제는 검토 과정에서 데이터 유출이 걱정된다는 점입니다. 당분간 명시적인 워터마크만 고려합니다. 즉, 텍스트나 기타 항목을 추가하는 것입니다. 귀하의 개인 신원 데이터를 식별할 수 있는 사진에 대한 단어입니다. 이처럼 유출된 데이터를 바탕으로 개인을 추적할 수 있는 것은 물론, 문제가 발생하기 전에 예방하고 예방하는 것이 가장 중요한 기능이다.

문제 해결

구현 방법

워터마크를 구현하는 방법은 기능을 구현하는 인력의 구분에 따라 프런트엔드 워터마크와 백엔드 워터마크로 나눌 수 있습니다. 프런트 엔드 워터마크의 장점은 세 가지로 요약할 수 있습니다. 첫째, 서버 리소스를 차지하지 않고 클라이언트의 컴퓨팅 성능에 전적으로 의존하므로 서버에 대한 부담이 줄어듭니다. 둘째, 어떤 프런트엔드 구현을 구현하더라도 성능은 백엔드보다 빠릅니다. 셋째, 구현이 간단하다. 백엔드 워터마킹 구현의 가장 큰 장점 역시 안전성, 안전성, 안전성 3가지로 요약할 수 있습니다. Zhihu와 Weibo는 모두 백엔드 워터마크 솔루션을 사용합니다. 그러나 포괄적인 고려 끝에 우리는 워터마킹을 구현하기 위해 여전히 프런트엔드 솔루션을 채택하고 있습니다. 다음은 nodejs가 백엔드 이미지 워터마킹을 구현하는 방법도 간략하게 소개합니다.

노드 구현

은 세 가지 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

gif를 얻기 위해 gifwrap과 함께 사용할 수 있습니다. 워터마크;

프론트엔드 구현

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="/static/imghwm/default1.png"  data-src="https://xxx.xxx.jpg"  class="lazy"   / alt="프런트엔드에서 워터마킹을 어떻게 구현하는지 아시나요?" >
<p className="warter-mark-area" style={{ backgroundImage: `url(${getBase64Background({})})` }} />

장점: 순수 프런트 엔드 구현, 교차 도메인 지원, git 이미지 워터마크 지원;

단점: 생성된 base64 URL ​​은 상대적으로 큽니다;

사실 이 두 가지를 바탕으로 첫 번째 캔버스 구현 방법의 경우 세 번째 방법을 쉽게 생각해 낼 수 있는데, 첫 번째 방법에서 그림의 상위 레이어를 그림이 아닌 캔버스로 덮는 것입니다. , 두 방법의 단점을 완벽하게 피할 수 있습니다. 하지만 잠시 멈추고 두 솔루션을 결합하고 캔버스를 사용하여 그리는 더 간단하고 쉬운 방법이 있습니까? 예, 대신 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 워터마크 지원, 도메인 간 문제 없음, 반복 속성 사용, dom 프로세스에 삽입 없음, 성능 문제 없음

QA

질문 1:

dom을 삭제하는 경우; 워터마크 좋아요, 사진에 워터마크가 없나요?

답변:

MutationObserver를 사용하여 물 노드를 모니터링할 수 있습니다. 노드가 수정되면 이미지가 숨겨집니다.

질문 2:

마우스 오른쪽 버튼을 클릭하여 이미지를 복사하시겠습니까?

답변:

모든 사진에 대해 마우스 오른쪽 버튼 클릭 기능이 비활성화되어 있습니다.

질문 3:

콘솔의 네트워크에서 사진 정보를 얻는다면 어떻게 될까요?

답변:

현재 이 작업에 적합한 솔루션은 없습니다. 백엔드 구현 솔루션을 사용하는 것이 좋습니다

요약

프론트엔드에 구현되는 워터마크 솔루션은 언제나 임시적인 솔루션일 뿐이고, 비즈니스 백엔드 구현에는 서버 리소스가 소모되기 마련이지만 사실 가장 이상적인 솔루션은 독립적인 워터마크 서비스를 제공하는 것입니다. 로딩 과정에서 약간의 지연이 있습니다. 데이터 보안에 비해 밀리초 수준의 지연은 여전히 ​​허용 가능하므로 비즈니스의 서비스 안정성이 영향을 받지 않습니다.

일상적인 Q&A 과정에서 많은 비즈니스 당사자들이 저에게 워터마크 가려짐의 위험 요소에 대해 문의할 것입니다. 매번 저는 데이터 보안의 중요성에 대해서만 답변할 수 있습니다. , 워터마크의 밀도 또한 지속적으로 최적화되고 있으며 워터마크 기능뿐만 아니라 폐색 문제도 더 잘 해결할 수 있는 버전이 나올 것이라고 믿습니다.

추천 학습: html 비디오 튜토리얼

위 내용은 프런트엔드에서 워터마킹을 어떻게 구현하는지 아시나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!