手把手教你实现自定义网页水印的npm包，防止截图泄露敏感信息

技术洪流中，网页水印能阻止敏感数据泄露，并能追溯信息来源。那么，如何制作一个定制的npm水印包？接下来，我将详细为大家揭秘！

网页水印的重要性

如今网络信息流通频繁，网页水印扮演着至关重要的角色。例如，钉钉、飞书等应用在聊天界面展示用户昵称水印，此举能有效阻止用户随意截图或录屏，防止信息泄露。2024年，许多企业借助水印技术成功追踪到信息泄露的源头，从而避免了损失。这充分说明，网页水印是维护信息安全的重要工具。

mkdir watermarkly && cd watermarkly
npm init
touch index.js
touch README.md

项目创建思路

要制作一个自定义水印的npm包，首先需要设立一个npm项目。这相当于建造房屋时打下坚实的基础。你可以借鉴现有的开源项目来搭建基本结构，并按照规范步骤来启动项目。以我个人的经验来说，刚开始时我遇到了不少挑战，但通过参考网络上的开源模板，我还是成功地搭建了项目。随后，我设置了可调整的参数来构建画布，这样就能灵活地满足各种需求。

画布创建要点

// 删除已有画布
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);

生成画布依据id至关重要。缺少id参数时，系统会自动创建一个随机字符串，以防与页面内的其他DOM ID相冲突。过去在项目里，有同事因未留意到id重复问题，导致水印出现异常，这让我们花费了大量时间去排查。若已有相应的画布，应先将其清除，再重新生成。设置画布大小为屏幕可用区域，固定在可视窗口内，并将z-index设置为-1，以确保不会干扰页面的操作。

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); 
  }
}

安全漏洞与解决

原本以为完成这些步骤任务就圆满结束，但领导指出还不够细致。有经验的专家通过调整调试窗口等手段可以轻易去除水印。这就像一座看似坚不可摧的城堡，却隐藏着秘密通道。因此，我们必须给水印加上安全锁，比如使用加密技术、实时监控机制等，使心怀叵测的人难以得手，从而提高水印的安全性。

发布项目成果

虽然这只是一项普通的小要求，但要在下班后用心完成确实挺难的。我之所以制作这个包，是因为在技术交流群中有人提出了相关疑问。如今项目已经完成，我已经将它上传到了npm仓库，让大家都能使用。看到自己的代码能够帮助到别人，那种成就感真的很强，就像播种后收获果实一样。

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 i --save watermarkly

在进行项目操作时，是否曾遇到起初以为无虞，最终却暴露出潜在风险的问题？若觉得本文对您有所帮助，还请点赞并转发！

import Watermark from 'watermarkly';
new Watermark({
    text: 'test'
});