前端水印初探

chensen  |  2019. 03. 06   |  阅读 847 次
无线开发

为了防止信息泄露,保障信息安全,给网页添加水印是一种比较常见的方法。

本文介绍一种添加水印的方法,具有以下特点:

  • 不影响现有代码
  • 可以任意给网页的不同部分添加水印
  • 纯前端 JavaScript 实现
  • 可简单防止用户通过浏览器开发者工具隐藏水印

思考一下,生成的水印需要满足那些需求呢?

  • 根据动态内容生成静态图片
  • 包含一段标识信息,同时需要覆盖足够的区域

根据水印的需求,自然会想到用 background 指定 image,并让其在 x,y 方向上重复展示,来实现覆盖区域。那么如何根据动态内容生成 image?你一定可以想到前端的绘图魔法(Canvas / SVG)。首先绘制好我们需要的图形,拿到图形编码后的 Data URLs 字符串,该字符串包含所需的图像信息,再配合使用 background 属性实现给网页添加水印。

绘图魔法(一)—— Canvas

HTMLCanvasElement.toDataURL 该方法返回一个包含图片信息的 Data URLs。

const canvas = document.createElement('canvas');  
canvas.setAttribute('width', width);  
canvas.setAttribute('height', height);  
var ctx = canvas.getContext("2d");

ctx.textAlign = textAlign;  
ctx.textBaseline = textBaseline;  
ctx.font = font;  
ctx.fillStyle = fillStyle;  
ctx.rotate(Math.PI / 180 * rotate);  
ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

var base64Url = canvas.toDataURL();  

绘图魔法(二)—— SVG

SVG:可缩放矢量图形是一种基于可扩展标记语言,用于描述二维矢量图形的图形格式。使用 SVG 生成图片的方式和 Canvas 的方式类似,只是 Data URLs 的生成方式换成了 SVG。

const svgStr =  
`<svg xmlns="namespace" width="${width}" height="${width}">
      <text x="50%" y="50%" dy="12px"
        text-anchor="middle"
        stroke="#000000"
        stroke-width="1"
        stroke-opacity="${opacity}"
        fill="none"
        transform="rotate(-45, 120 120)"
        style="font-size: ${fontSize};">
        ${content}
      </text>
</svg>`;  
const base64Url = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;  

生成 Data URLs 之后,可将其存为全局变量或者存在 store 中