(function () {
// svg 实现 watermark
function __svgWM({
container = document.body,
content = '请勿外传',
width = '100%',
height = '100%',
opacity = '0.8',
fontSize = '12px',
zIndex = 1000
} = {}) {
const args = arguments[0];
let textStr = '',count = 0;
for(var i=(document.body.offsetHeight*0.5)*-1;i<800;i+=200) {
for(var j=0;j<document.body.offsetHeight*1.5;j+=40) {
count++;
if(count%2) {
textStr +=`<text x='${i+90}' y='${j}' dy="12px"
text-anchor="middle"
stroke="#e1e5ea"
stroke-width="1"
stroke-opacity="${opacity}"
transform="rotate(-35, 120 120)"
fill="none"
style="font-size: ${fontSize};">
${content}
</text>`
}else {
textStr +=`<text x='${i}' y='${j}' dy="12px"
text-anchor="middle"
stroke="#e1e5ea"
stroke-width="1"
stroke-opacity="${opacity}"
transform="rotate(-35, 120 120)"
fill="none"
style="font-size: ${fontSize};">
${content}
</text>`
}
}
}
const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${width}">${textStr}</svg>`;
const base64Url = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
const __wm = document.querySelector('.__wm');
const watermarkDiv = __wm || document.createElement("div");
const styleStr = `
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:${zIndex};
pointer-events:none;
background-repeat:no-repeat;
background-image:url('${base64Url}')`;
watermarkDiv.setAttribute('style', styleStr);
watermarkDiv.classList.add('__wm');
if (!__wm) {
container.style.position = 'relative';
container.insertBefore(watermarkDiv, container.firstChild);
}
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
let mo = new MutationObserver(function () {
const __wm = document.querySelector('.__wm');
// 只在__wm元素变动才重新调用 __svgWM
if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
// 避免一直触发
mo.disconnect();
mo = null;
__svgWM(JSON.parse(JSON.stringify(args)));
}
});
mo.observe(container, {
attributes: true,
subtree: true,
childList: true
})
}
}
if (typeof module != 'undefined' && module.exports) { //CMD
module.exports = __svgWM;
} else if (typeof define == 'function' && define.amd) { // AMD
define(function () {
return __svgWM;
});
} else {
window.__svgWM = __svgWM;
}
})();
// 调用
// __svgWM({
// content:`王丽丽 0256888`,
// })