2种前端实现图片加水印的方式

╰+哭是因爲堅強的太久メ 2022-08-28 12:58 216阅读 0赞

![c00187b63b6c27317b2a5b41c9fbe0ed.png][]

来源 | http://www.fly63.com/

为了防止信息泄露或知识产权被侵犯，在web的世界里，对于图片文档等增加水印处理是十分有必要的。水印的添加根据环境可以分为两大类，前端浏览器环境添加和后端服务环境添加。

前端浏览器加水印：

> 减轻服务端的压力，快速反应  
> 安全系数较低，对于掌握一定前端知识的人来说可以通过各种骚操作跳过水印获取到源文件  
> 适用场景：资源不跟某一个单独的用户绑定，而是一份资源，多个用户查看，需要在每一个用户查看的时候添加用户特有的水印，多用于某些机密文档或者展示机密信息的页面，水印的目的在于文档外流的时候可以追究到责任人

后端服务器加水印：

> 当遇到大文件密集水印，或是复杂水印，占用服务器内存、运算量，请求时间过长  
> 安全性高，无法获取到加水印前的源文件  
> 适用场景：资源为某个用户独有，一份原始资源只需要做一次处理，将其存储之后就无需再次处理，水印的目的在于标示资源的归属人

下面主要讲解前端浏览器环境生成水印的几种方式。

## **1、canvas 生成方式** ##

canvas 有着不错的兼容性，是一种比较可靠、成熟的可视化技术。但是它比较依赖分辨率，对文本的处理上也有着先天的不足。但是它可以很方便的将结果保存为图片，对于完成水印的需求也是非常合适的。

为了方便使用者上手，我将所有的实现坐标都设置为top/left，以方便对x、y的设置。

export default class CanvasWay {
        constructor(watermark) {
            this.watermark = watermark
            const {width, height} = watermark
            this.canvas = document.createElement('canvas');
            this.canvas.setAttribute('width', width);
            this.canvas.setAttribute('height', height);
        }
    
    
        render() {
            const {txt, x, y, width, height, font, color, fontSize, alpha, angle} = this.watermark
            const ctx = this.canvas.getContext('2d');
            ctx.clearRect(0, 0, width, height);
            ctx.textBaseline = 'top';
            ctx.textAlign = 'left'
            ctx.fillStyle = color;
            ctx.globalAlpha = alpha;
            ctx.font = `${fontSize}px ${font}`
            ctx.translate(x, y)
            ctx.rotate(Math.PI / 180 * angle);
            ctx.translate(-x, -y - fontSize)
            ctx.fillText(txt, x, y + fontSize);
            return this.canvas.toDataURL();
        }
    }

## **2、svg 生成方式** ##

svg 与 canvas 相比浏览器兼容性几乎一致，除了几个早起的 Android 版本，这样的设备以及很难找到了，完全可以忽略。svg 使用的是 XML 的方式，不依赖分辨率，在做水印这件事上 svg 有着更好的优势。

svg 的 text 属性 x、y，是将文本左下位置定位到其坐标系的(x,y)位置，这可能和日常写 css 的定位不同，所有需要有一个 dy 值，设置其偏移量。

export default class SvgWay {
        constructor(watermark) {
            this.watermark = watermark
        }
    
    
        render() {
            const {txt, x, y, width, height, color, font, fontSize, alpha, angle} = this.watermark
            const svgStr =
                `<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px">
                    <text x="${x}px" y="${y}px" dy="${fontSize}px"
                        text-anchor="start"
                        stroke="${color}"
                        stroke-opacity="${alpha}"
                        fill="none"
                        transform="rotate(${angle},${x} ${y})"
                        font-weight="100"
                        font-size="${fontSize}"
                        font-family="${font}"
                        >
                        ${txt}
                    </text>
                </svg>`;
            return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
        }
    }

# **总结** #

安全问题不能大意，对于一些比较敏感的内容，我们可以通过组合使用上述的水印方案，这样才能最大程度给浏览者警示的作用，减少泄密的情况，即使泄密了,也有可能追踪到泄密者。

#  #

**学习更多技能**

**请点击下方公众号**

![b8b4776ce6e10a297307da16314bb5ef.gif][]

![86660c5df4714cc74ba4c2a43135dcc8.png][]

![491bc6af4d6070f2b2db06f04524e055.png][]

[c00187b63b6c27317b2a5b41c9fbe0ed.png]: /images/20220828/f460fee00290472282b0b3a38333c83f.png
[b8b4776ce6e10a297307da16314bb5ef.gif]: /images/20220828/9e05aeb1bcce4b508d1926d9361e6ef8.png
[86660c5df4714cc74ba4c2a43135dcc8.png]: /images/20220828/9a302e8521d549f2a429fe30c80fe0e3.png
[491bc6af4d6070f2b2db06f04524e055.png]: /images/20220828/f2642f77a23f46939f4066016db6e231.png