Vue

2023-09-08 06:05| 来源: 网络整理| 查看: 265

想了解更多使用 canvas 实现的水印效果，可参考此篇文章～～

watermark.js

import store from '@/store' const watermark = { set: function (text1, text2) { var canvas = document.createElement('canvas') canvas.width = 150; canvas.height = 120; canvas.style.display = 'none'; var shuiyin = canvas.getContext('2d'); // 控制文字的旋转角度和上下位置 shuiyin.rotate(-20 * Math.PI / 180); shuiyin.translate(-50, 20) //文字颜色 shuiyin.fillStyle = "#f5f5f5"; //文字样式 shuiyin.font = "100 16px Microsoft JhengHei "; shuiyin.fillText(text1, canvas.width / 3, canvas.height / 2); shuiyin.fillText(text2, canvas.width / 3, canvas.height / 2 + 20); /* 新建一个用于填充canvas水印的标签，之所以没有直接在body上添加，是因为z-index对个别内容影响，才考虑的不用body */ var watermark = document.createElement('div') const styleStr = ` position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:99; pointer-events:none; background-repeat:repeat; mix-blend-mode: multiply; background-image:url('${canvas.toDataURL("image/png")}')`; watermark.setAttribute('style', styleStr); watermark.classList.add('watermark') document.body.appendChild(watermark) //此方法是防止用户通过控制台修改样式去除水印效果 /* MutationObserver 是一个可以监听DOM结构变化的接口。 */ const observer = new MutationObserver(() => { const wmInstance = document.querySelector('.watermark'); if ((wmInstance && wmInstance.getAttribute('style') !== styleStr) || !wmInstance) { //如果标签在，只修改了属性，重新赋值属性 if (wmInstance) { // 避免一直触发 // observer.disconnect(); // console.log('水印属性修改了'); wmInstance.setAttribute('style', styleStr); } else { /* 此处根据用户登录状态，判断是否终止监听，避免用户退出后登录页面仍然有水印 */ if (store.getters.token) { //标签被移除，重新添加标签 // console.log('水印标签被移除了'); document.body.appendChild(watermark) } else { observer.disconnect(); } } } }) observer.observe(document.body, { attributes: true, subtree: true, childList: true, }); }, close: function () { /* 关闭页面的水印，即要移除水印标签 */ let watermark = document.querySelector('.watermark') document.body.removeChild(watermark) } } export default watermark

使用方法：

import watermark from '@/utils/watermark.js' //添加水印 watermark.set('1234567', '谁在花里胡哨') //移除水印,传 null 移除水印 watermark.close()

2021-03-09 12-02-23.gif

【本文地址】

Vue

Vue

今日新闻

推荐新闻