워터마크를 구현하는 방법은 무엇입니까? 워터마킹을 달성하는 여러 가지 방법에 대한 간략한 분석

워터마크는 어떻게 구현하나요? 이 글에서는 워터마크를 구현하는 여러 가지 방법을 알려드리겠습니다. 도움이 필요한 친구들은 이에 대해 알아볼 수 있습니다~

문제 발생

일상 업무에서 우리는 데이터 유출을 방지하기 위해 많은 민감한 데이터를 자주 접하게 됩니다. 누출이 발생하면 데이터를 "패키징"해야 합니다. 데이터 유출에 관심이 있는 '범죄자들'이 극심한 '여론의 압박' 속에서 불법행위를 포기하고, 싸우지 않고 남을 물리치는 효과를 얻으려는 '범죄적 시도'를 하게 만드는 것이 목적이다. 보안 부서에 근무하는 우리들에게는 데이터 보안에 대한 개념이 이미 뼛속 깊이 자리잡고 있습니다. 말 한마디, 그림 하나하나에 데이터 유출 위험이 있는지를 염두에 두는 것이 중요합니다. 우리가 생각해 왔던 질문입니다. 예를 들어, 사진의 워터마크는 작업 과정에서 자주 접하게 되는 문제입니다. 제가 하는 업무의 내용이 리뷰 플랫폼 개발이기 때문에 리뷰 플랫폼에 위험한 그림이 자주 나타나는 경우가 있는데, 리뷰어들의 보안 인식이 고르지 못한 점을 고려하여 불안전한 일이 발생하지 않도록 워터마크를 추가하는 것이 필요합니다. 사진.

문제 분석

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

문제 해결

구현 방법

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

노드 구현

은 세 가지 npm 패키지를 제공합니다. 이 부분은 우리 기사의 초점이 아니며 간단한 데모만 제공됩니다.

1, gm https://github.com/aheckmann/gm 6.4k 별

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

var images = require("images");

images("input.jpg")                     //Load image from file 
                                        //加载图像文件
    .size(400)                          //Geometric scaling the image to 400 pixels width
                                        //等比缩放图像到400像素宽
    .draw(images("logo.png"), 10, 10)   //Drawn logo at coordinates (10,10)
                                        //在(10,10)处绘制Logo
    .save("output.jpg", {               //Save the image to a file, with the quality of 50
        quality : 50                    //保存图片到文件,图片质量为50
    });

zhangyuanwei 중국어, 중국어 문서에서 개발한 경량의 다른 도구를 설치할 필요가 없습니다.

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

가능 gifwrap gif 워터마크로 구현

프런트 엔드 구현

1, 배경 이미지는 전체 화면 워터마크를 구현합니다

Alibaba 내부 및 외부 개인 정보 페이지에 대한 효과를 확인할 수 있습니다. 원칙:

장점: 백엔드에서 그림이 생성되어 안전합니다.

단점: 이미지 정보를 얻기 위해 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;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);
    }
}

장점: 간단하고 구현하기 쉽습니다.

단점: 너무 크거나 너무 많은 그림이 성능에 영향을 미칩니다.

효과 표시:

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" / alt="워터마크를 구현하는 방법은 무엇입니까? 워터마킹을 달성하는 여러 가지 방법에 대한 간략한 분석" >
<div 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 (
    <div className={styles.water_mark_wrapper} ref={boxRef}>
      <div 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" />
          </>
        )
      }
    </div>
  );
};

优点：支持 gif 图水印，不存在跨域问题，使用 repeat 属性，无插入 dom 过程，无性能问题；
缺点：。。。

dom 结构展示：

5，效果图展示

canvas 和 svg 实现的效果在展示上没有很大的区别，所以效果图就一张图全部展示了。

QA

问题一：

如果把 watermark 的 dom 删除了，图片不就是无水印了吗？

答案：

可以利用 MutationObserver 监听 water 的节点，如果节点被修改，图片也随之隐藏；

问题二：

鼠标右键复制图片？

答案：

全部的图片都禁用了右键功能

问题三：

如果从控制台的network获取图片信息呢？

答案：

此操作暂时没有想到好的解决办法，建议采用后端实现方案

总结

前端实现的水印方案始终只是一种临时方案，业务后端实现又耗费服务器资源，其实最理想的解决方式就是提供一个独立的水印服务，虽然加载过程中会略有延迟，但是相对与数据安全来说，毫秒级的延迟还是可以接受的，这样又能保证不影响业务的服务稳定性。

在每天的答疑过程中，也会有很多业务方来找我沟通水印遮挡风险点的问题，每次只能用数据安全的重要性来回复他们，当然，水印的大小，透明度，密集程度也都在不断的调优中，相信会有一个版本，既能起到水印的作用，也能更好的解决遮挡问题。

原文地址：https://segmentfault.com/a/1190000040425430

作者：ES2049 /卜露

更多编程相关知识，请访问：编程视频！！

위 내용은 워터마크를 구현하는 방법은 무엇입니까? 워터마킹을 달성하는 여러 가지 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!