Vue项目为页面添加水印效果

最近在做项目，有这样要求，需要在指定容器中添加水印，也可不设置容器，如果没有容器，则添加在整个页面中，即body，当接到这个需求的时候我第一想的方法就是用canvas来实现，话不多说搞起来。

实现方法

首先我们在utils文件中新建一个waterMark.js文件。

let watermark = {};
let setWatermark = (text, sourceBody) => {let id = 'watermark_fjq_' + parseInt(Math.random() * 100000);if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id));}//水印图片let can = document.createElement('canvas');can.width = 390; // 单个水印大小can.height = 180; // 单个水印大小let cans = can.getContext('2d');cans.rotate((-20 * Math.PI) / 180);cans.font = '14px Vedana';cans.fillStyle = 'rgba(200, 200, 200, 0.20)'; //水印颜色cans.textAlign = 'left';cans.textBaseline = 'Middle';cans.fillText(text, can.width / 20, can.height);//设置插入div样式let water_div = document.createElement('div');water_div.id = id;water_div.style.pointerEvents = 'none';water_div.style.overflow = 'hidden';water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';if (sourceBody) {sourceBody.style.position = 'relative';water_div.style.width = '100%';water_div.style.height = '100%';water_div.style.position = 'absolute';water_div.style.top = '0';water_div.style.left = '0';sourceBody.appendChild(water_div);} else {water_div.style.top = '3px';water_div.style.left = '200px';water_div.style.position = 'fixed';water_div.style.zIndex = '9999';water_div.style.width = document.documentElement.offsetWidth + 'px';water_div.style.height = document.documentElement.offsetHeight + 'px';document.body.appendChild(water_div);}return id;
};/***  该方法只允许调用一次*  @param:*  @text == 水印内容*  @sourceBody == 水印添加在哪里，不传就是body* */
watermark.set = (text, sourceBody) => {setTimeout(() => {setWatermark(text, sourceBody);}, 1000); //延迟加载
};export default watermark;

使用方法

在main.js 中引入 waterMark.js。

// 引入水印文件地址
import watermark from '@/utils/waterMark'
Vue.prototype.$watermark = watermark

 如果我们在指定页面中使用：

this.$watermark.set(text，dom)

参数	说明	是否必填
text	水印内容	是
dom	水印容器。若不传，则全屏水印，若传，则指定容器。	否

比如，在指定容器水印： 

<template><div class="page"><div ref="content"></div></div>
</template><script>
export default {data() {return {};},mounted(){this.$watermark.set("码云笔记",this.$refs.content)},beforeDestroy() {this.$watermark.set("",this.$refs.content);}
};
</script>

 我这里需要给整个项目页面添加水印，所以在App.vue文件中引入：

<template><router-view />
</template><script>
export default {name: 'App',data() {return {};},mounted() {this.$watermark.set('码云笔记');},beforeDestroy() {this.$watermark.set('');},
};
</script>

 结语

以上就是我在Vue项目为页面添加水印效果，都是实际项目中使用过的，大家可以直接CV使用，如果大家有更好的方法，欢迎留言交流。