水印图例

1.新建Watermark.js 文件

javascript">const watermark = {}const setWatermark = (text, sourceBody) => {const id =Math.random() * 10000 +'-' +Math.random() * 10000 +'/' +Math.random() * 10000if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}const can = document.createElement('canvas')can.width = 200 // 设置水印之间的左右间距can.height = 150 // 设置水印之间的上下间距const cans = can.getContext('2d')cans.rotate((-20 * Math.PI) / 180)cans.font = '15px Vedana'cans.fillStyle = 'rgba(0, 0, 0, .3)'  //水印颜色cans.textAlign = 'left'cans.textBaseline = 'Middle'cans.fillText(text, can.width / 20, can.height)const wateDiv = document.createElement('div')wateDiv.id = idwateDiv.className = 'watermarkClass'wateDiv.style.pointerEvents = 'none'wateDiv.style.background ='url(' + can.toDataURL('image/png') + ') left top repeat'if (sourceBody) {wateDiv.style.width = '100%'wateDiv.style.height = '100%'sourceBody.appendChild(wateDiv)} else {wateDiv.style.top = '3px'wateDiv.style.left = '0px'wateDiv.style.position = 'fixed'wateDiv.style.zIndex = '100000'wateDiv.style.width = document.documentElement.clientWidth + 'px'wateDiv.style.height = document.documentElement.clientHeight + 'px'document.body.appendChild(wateDiv)}return id
}/***  该方法只允许调用一次*  @param:*  @text == 水印内容*  @sourceBody == 水印添加的位置，不传就是body* */
watermark.set = (text, sourceBody) => {const domArr = Array.from(document.getElementsByClassName('watermarkClass'))for (let i = 0; i < domArr.length; i++) {const element = domArr[i]// element.parentNode.removeChild(element);element.remove()}if (text === '') {return}setWatermark(text, sourceBody)// let id = setWatermark(text, sourceBody);// setInterval(() => {//   if (document.getElementById(id) === null) {//     id = setWatermark(text, sourceBody);//   }// }, 2000);// window.onresize = () => {//   setWatermark(text, sourceBody);// };
}export default watermark

2. 在vue 文件使用

javascript"><script>
import Watermark from './Watermark'  //引入水印文件
export default {name: 'app',mounted () {Watermark.set(水印名称)// 添加水印名称}
}
</script><style></style>