{"version":3,"file":"watermark.mjs","sources":["../../../src/utils/watermark.js"],"sourcesContent":["import store from '@/store'\r\nexport const watermark = {\r\n\tset: function (text1, text2) {\r\n\t\tconst canvas = document.createElement('canvas')\r\n\t\tcanvas.width = 150\r\n\t\tcanvas.height = 120\r\n\t\tcanvas.style.display = 'none'\r\n\t\tconst shuiyin = canvas.getContext('2d')\r\n\t\t// 控制文字的旋转角度和上下位置\r\n\t\tshuiyin.rotate((-20 * Math.PI) / 180)\r\n\t\tshuiyin.translate(-50, 20)\r\n\t\t//文字颜色\r\n\t\tshuiyin.fillStyle = '#f5f5f5'\r\n\t\t//文字样式\r\n\t\tshuiyin.font = '100 16px Microsoft JhengHei '\r\n\t\tshuiyin.fillText(text1, canvas.width / 3, canvas.height / 2)\r\n\t\tshuiyin.fillText(text2, canvas.width / 3, canvas.height / 2 + 20)\r\n\t\t/* 新建一个用于填充canvas水印的标签，之所以没有直接在body上添加，\r\n           是因为z-index对个别内容影响，才考虑的不用body */\r\n\t\tconst watermark = document.createElement('div')\r\n\t\tconst styleStr = `\r\n            position:fixed;\r\n            top:0;\r\n            left:0;\r\n            width:100vw;\r\n            height:100vh;\r\n            z-index:99;\r\n            pointer-events:none;\r\n            background-repeat:repeat;\r\n            mix-blend-mode: multiply;\r\n            background-image:url('${canvas.toDataURL('image/png')}')`\r\n\t\twatermark.setAttribute('style', styleStr)\r\n\t\twatermark.classList.add('watermark')\r\n\t\tdocument.body.appendChild(watermark)\r\n\t\t//此方法是防止用户通过控制台修改样式去除水印效果\r\n\t\t/* MutationObserver 是一个可以监听DOM结构变化的接口。 */\r\n\t\tconst observer = new MutationObserver(() => {\r\n\t\t\tconst wmInstance = document.querySelector('.watermark')\r\n\t\t\tif ((wmInstance && wmInstance.getAttribute('style') !== styleStr) || !wmInstance) {\r\n\t\t\t\t//如果标签在，只修改了属性，重新赋值属性\r\n\t\t\t\tif (wmInstance) {\r\n\t\t\t\t\t// 避免一直触发\r\n\t\t\t\t\t// observer.disconnect();\r\n\t\t\t\t\t// console.log('水印属性修改了');\r\n\t\t\t\t\twmInstance.setAttribute('style', styleStr)\r\n\t\t\t\t} else {\r\n\t\t\t\t\t/* 此处根据用户登录状态，判断是否终止监听，避免用户退出后登录页面仍然有水印 */\r\n\t\t\t\t\tif (store.getters.token) {\r\n\t\t\t\t\t\t//标签被移除，重新添加标签\r\n\t\t\t\t\t\t// console.log('水印标签被移除了');\r\n\t\t\t\t\t\tdocument.body.appendChild(watermark)\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tobserver.disconnect()\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\t\tobserver.observe(document.body, {\r\n\t\t\tattributes: true,\r\n\t\t\tsubtree: true,\r\n\t\t\tchildList: true\r\n\t\t})\r\n\t},\r\n\tclose: function () {\r\n\t\t/* 关闭页面的水印，即要移除水印标签 */\r\n\t\tlet watermark = document.querySelector('.watermark')\r\n\t\tdocument.body.removeChild(watermark)\r\n\t}\r\n}\r\n// 使用方法\r\n// import { watermark } from '@/utils/watermark'\r\n// 添加水印\r\n// watermark.set('Snowy','xiaonuo.vip')\r\n// 移除水印,传 null 移除水印\r\n// watermark.close()\r\n"],"names":["watermark"],"mappings":";AACY,MAAC,YAAY;AAAA,EACxB,KAAK,SAAU,OAAO,OAAO;AAC5B,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,QAAQ;AACf,WAAO,SAAS;AAChB,WAAO,MAAM,UAAU;AACvB,UAAM,UAAU,OAAO,WAAW,IAAI;AAEtC,YAAQ,OAAQ,MAAM,KAAK,KAAM,GAAG;AACpC,YAAQ,UAAU,KAAK,EAAE;AAEzB,YAAQ,YAAY;AAEpB,YAAQ,OAAO;AACf,YAAQ,SAAS,OAAO,OAAO,QAAQ,GAAG,OAAO,SAAS,CAAC;AAC3D,YAAQ,SAAS,OAAO,OAAO,QAAQ,GAAG,OAAO,SAAS,IAAI,EAAE;AAGhE,UAAMA,aAAY,SAAS,cAAc,KAAK;AAC9C,UAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAUiB,OAAO,UAAU,WAAW;AAC9D,IAAAA,WAAU,aAAa,SAAS,QAAQ;AACxC,IAAAA,WAAU,UAAU,IAAI,WAAW;AACnC,aAAS,KAAK,YAAYA,UAAS;AAGnC,UAAM,WAAW,IAAI,iBAAiB,MAAM;AAC3C,YAAM,aAAa,SAAS,cAAc,YAAY;AACtD,UAAK,cAAc,WAAW,aAAa,OAAO,MAAM,YAAa,CAAC,YAAY;AAEjF,YAAI,YAAY;AAIf,qBAAW,aAAa,SAAS,QAAQ;AAAA,QAC9C,OAAW;AAEN,cAAI,MAAM,QAAQ,OAAO;AAGxB,qBAAS,KAAK,YAAYA,UAAS;AAAA,UACzC,OAAY;AACN,qBAAS,WAAY;AAAA,UACrB;AAAA,QACD;AAAA,MACD;AAAA,IACJ,CAAG;AACD,aAAS,QAAQ,SAAS,MAAM;AAAA,MAC/B,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,IACd,CAAG;AAAA,EACD;AAAA,EACD,OAAO,WAAY;AAElB,QAAIA,aAAY,SAAS,cAAc,YAAY;AACnD,aAAS,KAAK,YAAYA,UAAS;AAAA,EACnC;AACF;"}