loadchange / gwm Goto Github PK
View Code? Open in Web Editor NEW🍭gwm.js Generate Watermark 用于生成网页水印,警示信息安全与责任追踪。
Home Page: https://loadchange.github.io/gwm/
License: MIT License
🍭gwm.js Generate Watermark 用于生成网页水印,警示信息安全与责任追踪。
Home Page: https://loadchange.github.io/gwm/
License: MIT License
目前看 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,会被强制覆盖为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
}
当前的这些水印方案,都是插入一个背景图片为水印的div元素,遮罩在整个页面上面,虽说解决了水印需求,但是对于网页打印就完全无解了啊,大佬有没有什么思路
支持ie9 下生成水印并可以编辑 ?
我的项目是单页面应用
在其中的一个页面组件中添加了水印
其他的页面 也都有了
可以只给指定的页面组件加吗
其他的不加
没办法多次creation 最终生成一个水印
即使destroy 为 true
在轩辕上就的就是这个吧
例如txt参数传入一个数组
{
txt: ['4444444444', '2019-01-14', 'userID:9999']
}
输出的水印可以变成三行
大佬,有什么优雅的方式来隐藏水印?
获取到水印的DOM节点然后来设置css样式?
可以自定义图片水印吗
传入了一个id为div1 的div容器,为啥填充的还是整个页面都有水印?
bindCss.ts 中的 isSupport 用 document.documentElement.style 来判断属性是否可用,但里面的key是驼峰的形式,然后元素设置样式的时候,elem.style.setProperty(key, css[key], 'important') setProperty 的key不支持驼峰形式,必须是横杠的,导致pointerEvents和zIndex没有设置上。
一个页面有两个dom元素需要打水印;
尝试引入两次creation 但是会被覆盖
将已经有设置position定位的容器设置为container,会导致样式错乱。elem.style.setProperty(key, css[key], 'important'),能不能先判断该元素有没有设置定位再进行设置?
能否支持换行
应设置ctx.textAlign='center',然后ctx.translate(canvas.width / 2, 0),以使文本居中显示,可改善文字被裁减的问题。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.