hzfvictory / water-mark Goto Github PK

常用于数据后台，可有效防止信息外泄，方便追踪

yarn add watermark-webp

esm/框架 使用

<div id="war"></div>

<script type="module">
  import waterMark from "watermark-webp"
  const unobserver = waterMark('水印  3557', null, 'war', {left: '10px'});
  // unobserver 返回销毁函数
</script>

script直接引入方式

<div id="war"></div>

<script src="https://cdn.jsdelivr.net/gh/hzfvictory/cdn@master/water-mark/index.js"></script>
<script>
  waterMark('水印  3557', null, 'war', {left: '10px'},)
</script>
</script>

https://hzfvictory.github.io/water-mark

1. 为了防止开发者肆意修改dom已达到修改水印的目的，插件使用的 MutationObserver 异步实时监控修改dom,

MutationObserver 在 IE 中最低要就是 IE11，如果你的网站不需要支持IE或者只支持到 IE11，那么你可以放心的使用 MutationObserver，否则只能和 MutationObserver 说拜拜了

2. 框架类的项目 ，防止加载不到要添加的 dom,应在 dom 加载完成后的周期函数，执行水印方法。
3. 建议挂载到外层的 dom 上，这样直接删除最外层 dom 话，内容被删除水印也没有留下的必要。

可有效设置 background-position 让水印更靠近边缘展示，使当前页面覆盖更广，默认值是 background-position: ${canvas.width / 1.5}px ${canvas.height / 1.4}px

imgType默认是image/webp 对比其他图片格式体积小、质量高、解码加载速度快，如果当前浏览器不支持 image/webp 格式自动转换为 image/png,不推荐使用其他格式（部分带有背景色，遮挡页面内容）