cleverliurx / l-watermark Goto Github PK

WaterMark.image({
target: document.getElementById("demo-image"),
text: "User Id: 1008611",
position: 'center',
secret: true,
})

然后对生成的图片截图，拿截图去解密，就解密不出来~

// 图片水印显示
const decodeImage = async () => {
const demoImg = document.getElementById("demo-image2")； // 图片截图
const decodeSrc = await WaterMark.utils.decodeImage(demoImg.src)
document.getElementById("imgDom").src = decodeSrc
}
decodeImage()

这是我的参数

{
    "target": "/uploads/imgs/20230128/69afdded-75ee-4d36-9b2d-c8bfc8633934.webp",
    "image": "/uploads/imgs/20230128/ce9552c1-23fa-49d9-a9b9-24286c7ae4ec.jpeg",
    "imageWidth": 50,
    "imageHeight": 50,
    "position": "repeat",
    "cSpace": 20,
    "vSpace": 20
}

如上图所示，平铺并没有间隙

使用中发现当手动改变水印元素的属性时会重新添加一个新的水印，原来的水印并没有移除掉，页面上就同时出现了多个水印叠加

这里新添加元素之后 GuardDom.target 也没有和 PageWaterMark.watermakr 同步，导致 PageWaterMark.remove 只能移除掉最开始的那个水印元素

看起来是 canvas 绘图共有的问题，能否优化一下呢 @CleverLiurx

const watermark = WaterMark.page({
  containerEl: document.body,
  text: '预览模式',
  color: `${theme.semanticColors.bodyText}44`,
  fontSize: 16,
  vSpace: 35,
  cSpace: 35,
});

cSpace和vSpace失效