loadchange / gwm Goto Github PK

View Code? Open in Web Editor NEW

210.0 210.0 65.0 875 KB

🍭gwm.js Generate Watermark 用于生成网页水印，警示信息安全与责任追踪。

Home Page: https://loadchange.github.io/gwm/

License: MIT License

HTML 19.31% TypeScript 80.69%

gwm's People

Contributors

Stargazers

Watchers

Forkers

libin1991 fendaq lookmontain wohev6 asdlei99 wizos sunterry vvchen sosojustdo zoujiale johnchuj profoundsoul hzwjs dingzhiyuan martin4chen l644916040 bbxxc bbxc maqingbo 746964750 zoucq solin1346 littlesogo most-salty-fish zyj0021 mmhui jiangxk770 xialinlin stonezhaohan caojinyang go-on-the-way ret00100 zerogu yaqianghan gbig tailorx huskylengcb fengyun2 ravechan 027kaka yarnbyte yanyanchang miazzy alisafyj fyxz3025 laninblue trappistes kekewind gavin-hao zhaosanyuan0512 fupengl qingbeefed zjnny felixpu immissile kerwinchina wumuu v-immor yushangcl liubei-git zzzzz-l-break ming2xiao openneone zhangli344236745

gwm's Issues

🐛 默认的 Canvas 模式如果 txt 存在 '&' 或 '<' 等 html 实体字符，会导致生成水印空白。

目前看 Canvas 模式会使用无参数的 toDataURL 方法生成一个 dataURL 给 div 元素设置背景图片。

目前生成的 dataURL 的 mine-type 是 data:image/svg+xml;base64 ，后面的内容是 Svg 文本的 Base64 编码。

如果 txt 存在特殊字符，那么将生成的 dataURL 直接放在浏览器地址栏输入，便会出现下图提示问题。

根据 https://stackoverflow.com/questions/39623432/xml-error-on-line-at-column-entityref-expecting 的说法，是浏览器使用 XML 的语法解析 Svg 报错了。

解决方法可以将 txt 中的特殊字符进行转换，希望 gwm 这边能够处理下这个场景。

水印 z-index 支持自定义

当前水印的z-index,会被强制覆盖为999999，无法通过css属性设置。

export default (gwm = {}) => {
    const {gwmDom} = gwm
    const {css} = gwm.opts
    const target = gwmDom ? gwmDom : document.getElementById(_id)
    if (target) target.remove()
    const gwmDiv = document.createElement('div')
    if (isSupport('pointerEvents')) {
        css.pointerEvents = 'none'
        css.zIndex = 999999 // 此处覆盖了外部可能传递进来的zIndex
    }
    bindCSS(gwmDiv, css)
    gwmDiv.id = _id
    return gwmDiv
}

add an elementID,but the container always is body

样式问题

将已经有设置position定位的容器设置为container，会导致样式错乱。elem.style.setProperty(key, css[key], 'important')，能不能先判断该元素有没有设置定位再进行设置？

可以支持container 传入多个dom元素么?

一个页面有两个dom元素需要打水印;
尝试引入两次creation 但是会被覆盖

旋转角度过大，导致文字被裁减而显示不全

应设置ctx.textAlign='center',然后ctx.translate(canvas.width / 2, 0),以使文本居中显示，可改善文字被裁减的问题。

style.setProperty 不能设置 pointerEvents 和 zIndex

bindCss.ts 中的 isSupport 用 document.documentElement.style 来判断属性是否可用，但里面的key是驼峰的形式，然后元素设置样式的时候，elem.style.setProperty(key, css[key], 'important') setProperty 的key不支持驼峰形式，必须是横杠的，导致pointerEvents和zIndex没有设置上。