网站的规划与建设_按时间顺序可以分为哪几个阶段?,wordpress 栏目 主题,网坛最新排名,字节跳动直播开放平台最近在做项目#xff0c;有这样要求#xff0c;需要在指定容器中添加水印#xff0c;也可不设置容器#xff0c;如果没有容器#xff0c;则添加在整个页面中#xff0c;即body#xff0c;当接到这个需求的时候我第一想的方法就是用canvas来实现#xff0c;话不多说搞起…最近在做项目有这样要求需要在指定容器中添加水印也可不设置容器如果没有容器则添加在整个页面中即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(textdom)
参数说明是否必填text水印内容是dom水印容器。若不传则全屏水印若传则指定容器。否
比如在指定容器水印
templatediv classpagediv refcontent/div/div
/templatescript
export default {data() {return {};},mounted(){this.$watermark.set(码云笔记,this.$refs.content)},beforeDestroy() {this.$watermark.set(,this.$refs.content);}
};
/script我这里需要给整个项目页面添加水印所以在App.vue文件中引入
templaterouter-view /
/templatescript
export default {name: App,data() {return {};},mounted() {this.$watermark.set(码云笔记);},beforeDestroy() {this.$watermark.set();},
};
/script 结语
以上就是我在Vue项目为页面添加水印效果都是实际项目中使用过的大家可以直接CV使用如果大家有更好的方法欢迎留言交流。
