《大前端 基础组件》系列 80行实现一个网页水印npm包

前言

Coding 应当是一辈子的事业，而不单单是 30 岁的青春饭
本文已收录 GitHub https://github.com/ponkans/F2E，欢迎 Star，持续更新

网站浏览中，经常须要网页水印，来防止用户截图或者录屏暴露敏感信息后没法追踪用户来源。好比钉钉、飞书等软件，聊天背景会有你的花名。

水怪怪今天手把手带你实现一个自定义水印的 npm 包，并发布至 npm 仓库。

思路

• 获取标记信息，好比用户名、用户 ID 等（也就是你想打上水印的目标对象）
• 绘制水印，绘制工具咱们能够采用 canvas

实现

建立一个 npm 项目

mkdir watermarkly && cd watermarkly
npm init
touch index.js
touch README.md
复制代码

开放参数

• fontSize：水印字体大小
• color：水印字体颜色
• id：Canvas ID
• text：水印文案
• size：水印大小
• clarity：水印清晰度

建立画布

根据 id 生成 canvas 画布，若是没有 id 参数传入，则自动生成一个随机字符串，防止和页面其余 DOM ID 冲突，若是已经存在该 id 对应的画布，须要先清除再生成。

画布大小为可用屏幕大小。画布 fix 固定在可视窗口，z-index 为-1。

// 删除已有画布
let oldCanvas = document.getElementById(this.params.id);
if(oldCanvas){
    oldCanvas.parentNode.removeChild(oldCanvas);
}

// 建立画布
let body = document.getElementsByTagName('body');
let width = window.screen.width;
let height = window.screen.height;
let canvas = document.createElement('canvas');

let id = this.params.id
if(!id){
    id = randomString(18);
}

// 设置画布id
canvas.setAttribute('id', this.params.id); 
canvas.width = width * this.params.clarity;
canvas.height = height * this.params.clarity;
canvas.style.cssText= 'position: fixed;width: 100%;height: 100%;left:0;top:0;z-index: -1;';
body[0].appendChild(canvas);
复制代码

填充画布

• 计算 x 轴和 y 轴可展现水印个数，要作冗余计算，防止出现边界水印缺失

• 画布逆时针旋转 15 度

• 遍历 x,y 依次绘制水印

let canvas = document.getElementById(this.params.id);
let cxt = canvas.getContext('2d');

let redundance = 10;
let xCount = window.screen.width * this.params.clarity / this.params.size + redundance;
let yCount = window.screen.height * this.params.clarity / this.params.size + redundance;

cxt.rotate(-15*Math.PI/180);


for(let i = 0; i < xCount; i++) {
  for(let j = 0; j < yCount; j++) {
    cxt.fillStyle = this.params.color;
    cxt.font = this.params.fontSize + ' Arial';
    cxt.fillText(this.params.text, this.params.density*(i-redundance/2), j*this.params.size); 
  }
}
复制代码

安全锁

怪怪我兴致勃勃的写好了组件给老大看，结果，被吐槽说不严谨！what ？发生了什么？

凶手原来……

有点 coding 经验的同窗，很容易经过各类骚操做抹掉水印，好比打开调试窗口删除 canvas 或者修改 canvas 的样式属性。

因此咱们还须要对水印加安全锁，提升安全等级。

• 能够设置定时器，定时检查水印状态。

let self = this;
  window.setInterval(function(){
  let canvasDom = document.getElementById(self.params.id);            
  if (!canvasDom 
    || canvasDom.style.cssText !== 'position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: -1;' 
    || canvasDom.width !== (window.screen.width * self.params.clarity)
    || canvasDom.height !==  (window.screen.height * self.params.clarity)) {
    self.init();
  }
}, 500);
复制代码

发布

• npm login
• npm publish

水印效果

npm i --save watermarkly
复制代码

import Watermark from 'watermarkly';
new Watermark({
    text: 'test'
});
复制代码

总结

本文已收录 GitHub https://github.com/ponkans/F2E，欢迎 Star，持续更新

很常见的一个小需求，抽下班时间简单写了下，主要也是由于前几天看到技术交流群里面一个小伙伴问了下，就顺带实现跟你们分享一把。

喜欢的小伙伴麻烦加个关注，点个在看哦，biubiubiu~

近期热门原创推荐：

• 《吐血整理》系列 大厂前端组件库工具集合（PC 端、移动端、JS、CSS 等）
• 《大前端进阶 Node.js》系列 P6 必备脚手架/CI 构建能力
• 《吐血整理》系列 春招前端 17k 的水平 | 掘金技术征文

---

公众号后台回复【水印】，可获取源代码。

微信搜索【接水怪】或扫描下面二维码回复”加群“，我会拉你进技术交流群。讲真的，在这个群，哪怕您不说话，光看聊天记录也是一种成长。（阿里技术专家、敖丙做者、Java3y、蘑菇街资深前端、蚂蚁金服安全专家、各路大牛都在）。

接水怪也会按期原创，按期跟小伙伴进行经验交流或帮忙看简历。加关注，不迷路，有机会一块儿跑个步🏃 ↓↓↓