最近在做项目,有这样要求,需要在指定容器中添加水印,也可不设置容器,如果没有容器,则添加在整个页面中,即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使用,如果大家有更好的方法,欢迎留言交流。