遇到问题

日常工作中，经常会遇到很多敏感的数据，为防止数据的泄露，我们要在数据上做一些”包装“。目的就是让那些有心泄露数据的”不法分子“迫于严重的”舆论压力“而放弃不法行为，使之”犯罪未遂“，达到不战而屈人之兵的效果。而在安全部门工作的我们，数据安全的观念早已深入骨髓，每个文字，每张图片，都要留心是否有泄露的风险，怎么防止数据泄露，是我们一直思考的问题。比如图片的水印，就是我们工作过程中经常涉及到的问题。因为本身工作内容就是审核平台的开发，经常有一些风险图片会在审核平台出现，考虑到审核人员的安全意识参差不齐，所以为防止不安全的事情发生，图片增加水印的工作是必须要做的。

分析问题

首先，考虑到业务场景，现阶段的问题只是在审核过程中担心数据的泄露，我们暂时只考虑显式水印，既在图片上增加一些可以区别你个人身份的文字或者其他数据。这样就可以做到根据泄露的数据可以追查到个人，当然，未雨绸缪，防患于未然的警示功能才是它最主要。

解决问题

实现方式

水印的实现方式有很多，根据实现功能的人员分工可以分为前端水印和后端水印，前端水印的优点可以总结为三点，第一，可以不占用服务器资源，完全依赖客户端的计算能力，减少服务端压力。第二，速度快，无论哪种前端的实现方式，性能都是优于后端的。第三，实现方式简单。后端实现水印的最大优势也可以总结为三点，就是安全，安全，安全。知乎，微博都是采用后端实现的水印方案。但是综合考虑，我们还是采用前端实现水印的方案。下面也会简单介绍下 nodejs 怎么实现后端图片水印。

node实现

提供三个 npm 包，本部分不是我们文章的重点，只提供简单的 demo。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

`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，背景图实现全屏水印

可以到阿里内外个人信息页面查看效果，原理：

优点：图片是后端生成，安全；缺点：需要发起 http 请求，获取图片信息；效果展示：由于是内部系统，不方便展示效果。

2，dom 实现全图水印和图片水印

在图片的 onload 事件里获取图片宽高，根据图片大小生成水印区域，遮挡在图片上层，dom 内容为水印的文案或者其他信息，实现方式比较简单。

复制 1const wrap = document.querySelector('#ReactApp');
 2const { clientWidth, clientHeight } = wrap;
 3const waterHeight = 120;
 4const waterWidth = 180;
 5// 计算个数
 6const [columns, rows] = [~~(clientWidth / waterWidth), ~~(clientHeight / waterHeight)]
 7for (let i = 0; i < columns; i++) {
 8    for (let j = 0; j <= rows; j++) {
 9        const waterDom = document.createElement('div');
10        // 动态设置偏移值
11        waterDom.setAttribute('style', `
12            width: ${waterWidth}px; 
13            height: ${waterHeight}px; 
14            left: ${waterWidth + (i - 1) * waterWidth + 10}px;
15            top: ${waterHeight + (j - 1) * waterHeight + 10}px;
16            color: #000;
17            position: absolute`
18        );
19        waterDom.innerText = '测试水印';
20        wrap.appendChild(waterDom);
21    }
22}

优点：简单易实现；缺点：图片过大或者过多会有性能影响；效果展示：

**3，canvas 实现方式（第一版实现方案）**方法一：直接在图片上操作

废话不多说，直接上代码

复制 1useEffect(() => {
 2      // gif 图不支持
 3    if (src && src.includes('.gif')) {
 4      setShowImg(true);
 5    }
 6    image.onload = function () {
 7      try {
 8        // 太小的图不加载水印
 9        if (image.width < 10) {
10          setIsDataError(true);
11          props.setIsDataError && props.setIsDataError(true);
12          return;
13        }
14        const canvas = canvasRef.current;
15        canvas.width = image.width;
16        canvas.height = image.height;
17        // 设置水印
18        const font = `${Math.min(Math.max(Math.floor(innerCanvas.width / 14), 14), 48)}px` || fontSize;
19        innerContext.font = `${font} ${fontFamily}`;
20        innerContext.textBaseline = 'hanging';
21        innerContext.rotate(rotate * Math.PI / 180);
22        innerContext.lineWidth = lineWidth;
23        innerContext.strokeStyle = strokeStyle;
24        innerContext.strokeText(text, 0, innerCanvas.height / 4 * 3);
25        innerContext.fillStyle = fillStyle;
26        innerContext.fillText(text, 0, innerCanvas.height / 4 * 3);
27        const context = canvas.getContext('2d');
28        context.drawImage(this, 0, 0);
29        context.rect(0, 0, image.width || 200, image.height || 200);
30           // 设置水印浮层
31        const pattern = context.createPattern(innerCanvas, 'repeat');
32        context.fillStyle = pattern;
33        context.fill();
34      } catch (err) {
35        console.info(err);
36        setShowImg(true);
37      }
38    };
39    image.onerror = function () {
40      setShowImg(true);
41    };
42  }, [src]);

优点：纯前端实现方式，右键复制的图片也是有水印的；缺点：不支持 gif，图片必须支持跨域；效果展示：下文给出。

方法二：canvas 生成水印 url 赋值给 css background 属性

复制 1export const getBase64Background = (props) => {
 2  const { nick, empId } = GlobalConfig.userInfo;
 3  const {
 4    rotate = -20,
 5    height = 75,
 6    width = 85,
 7    text = `${nick}-${empId}`,
 8    fontSize = '14px',
 9    lineWidth = 2,
10    fontFamily = 'microsoft yahei',
11    strokeStyle = 'rgba(255, 255, 255, .15)',
12    fillStyle = 'rgba(0, 0, 0, 0.15)',
13    position = { x: 30, y: 30 },
14  } = props;
15  const image = new Image();
16  image.crossOrigin = 'Anonymous';
17  const canvas = document.createElement('canvas');
18  const context = canvas.getContext('2d');
19  canvas.width = width;
20  canvas.height = height;
21  context.font = `${fontSize} ${fontFamily}`;
22  context.lineWidth = lineWidth;
23  context.rotate(rotate * Math.PI / 180);
24  context.strokeStyle = strokeStyle;
25  context.fillStyle = fillStyle;
26  context.textAlign = 'center';
27  context.textBaseline = 'hanging';
28  context.strokeText(text, position.x, position.y);
29  context.fillText(text, position.x, position.y);
30  return canvas.toDataURL('image/png');
31};
32
33// 使用方式 
34<img src="https://xxx.xxx.jpg" />
35<div className="warter-mark-area" style={{ backgroundImage: `url(${getBase64Background({})})` }} />

复制 1export const WaterMark = (props) => {
 2  // 获取水印数据
 3  const { nick, empId } = GlobalConfig.userInfo;
 4  const boxRef = React.createRef();
 5  const [waterMarkStyle, setWaterMarkStyle] = useState('180px 120px');
 6  const [isError, setIsError] = useState(false);
 7  const {
 8    src, text = `${nick}-${empId}`, height: propsHeight, showSrc, img, nick, empId
 9  } = props;
10  // 设置背景图和背景图样式
11  const boxStyle = {
12    backgroundSize: waterMarkStyle,
13    backgroundImage: `url("data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\' xmlns=\'http://www.w3.org/2000/svg\' version=\'1.1\'><text width=\'100%\' height=\'100%\' x=\'20\' y=\'68\'  transform=\'rotate(-20)\' fill=\'rgba(0, 0, 0, 0.2)\' font-size=\'14\' stroke=\'rgba(255, 255, 255, .2)\' stroke-width=\'1\'>${text}</text></svg>")`,
14  };
15  const onLoad = (e) => {
16    const dom = e.target;
17    const {
18      previousSibling, nextSibling, offsetLeft, offsetTop,
19    } = dom;
20    // 获取图片宽高
21    const { width, height } = getComputedStyle(dom);
22    if (parseInt(width.replace('px', '')) < 180) {
23      setWaterMarkStyle(`${width} ${height.replace('px', '') / 2}px`);
24    };
25    previousSibling.style.height = height;
26    previousSibling.style.width = width;
27    previousSibling.style.top = `${offsetTop}px`;
28    previousSibling.style.left = `${offsetLeft}px`;
29    // 加载 loading 隐藏
30    nextSibling.style.display = 'none';
31  };
32  const onError = (event) => {
33    setIsError(true);
34  };
35  return (
36    <div className={styles.water_mark_wrapper} ref={boxRef}>
37      <div className={styles.water_mark_box} style={boxStyle} />
38      {isError
39        ? <ErrorSourceData src={src} showSrc={showSrc} height={propsHeight} text="图片加载错误" helpText="点击复制图片链接" />
40        : (
41          <>
42            <img onLoad={onLoad} referrerPolicy="no-referrer" onError={onError} src={src} alt="图片显示错误" />
43            <Icon className={styles.img_loading} type="loading" />
44          </>
45        )
46      }
47    </div>
48  );
49};