日常工作中，经常会遇到很多敏感的数据，为防止数据的泄露，我们要在数据上做一些”包装“。目的就是让那些有心泄露数据的”不法分子“迫于严重的”舆论压力“而放弃不法行为，使之”犯罪未遂“，达到不战而屈人之兵的效果。
在安全部门工作的我们，数据安全的观念早已深入骨髓，每个文字，每张图片，都要留心是否有泄露的风险，怎么防止数据泄露，是我们一直思考的问题。比如图片的水印，就是我们工作过程中经常涉及到的问题。因为本身工作内容就是审核平台的开发，经常有一些风险图片会在审核平台出现，考虑到审核人员的安全意识参差不齐，所以为防止不安全的事情发生，图片增加水印的工作是必须要做的。
分析问题
首先，考虑到业务场景，现阶段的问题只是在审核过程中担心数据的泄露，我们暂时只考虑显式水印，既在图片上增加一些可以区别你个人身份的文字或者其他数据。这样就可以做到根据泄露的数据可以追查到个人，当然，未雨绸缪，防患于未然的警示功能才是它最主要。
解决问题
实现方式
水印的实现方式有很多，根据实现功能的人员分工可以分为前端水印和后端水印，前端水印的优点可以总结为三点，第一，可以不占用服务器资源，完全依赖客户端的计算能力，减少服务端压力。第二，速度快，无论哪种前端的实现方式，性能都是优于后端的。第三，实现方式简单。后端实现水印的最大优势也可以总结为三点，就是安全，安全，安全。知乎，微博都是采用后端实现的水印方案。但是综合考虑，我们还是采用前端实现水印的方案。下面也会简单介绍下 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
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('div'); // 动态设置偏移值 waterDom.setAttribute('style', ` 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 = '测试水印'; 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('p'); // 动态设置偏移值 waterDom.setAttribute('style', ` 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 = '测试水印'; wrap.appendChild(waterDom); }}优点：简单易实现；
缺点：图片过大或者过多会有性能影响；
3、canvas 实现方式（第一版实现方案）
方法一：直接在图片上操作
废话不多说，直接上代码
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;