前端添加水印效果攻略【vue和原生js添加方式】
💌 作者简介
-
📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【
前端领域创作者】😜 -
📜 CSDN主页：水香木鱼
-
📑 个人博客：陈春波
-
🎨 系列专栏：后台管理系统
-
🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝
-
📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。
期待已久的添加水印方法它来啦!一🚀 喜欢原生js和vue的你,看过来吧。👇
一、🛸原生JS 添加水印方法
1、创建 warterMarkJS.js文件
2、页面内使用
注意：全局引用的话，需要在主页面内引入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS添加水印攻略</title> <script src="./js/warterMarkJS.js"></script> <style> </style></head><body style="height: 600px"> <div class="elementdiv"></div> <script> //设置水印名称 watermark('水香木鱼', "SXMY") </script></body></html>3、原生JS源码warterMarkJS.js
/*水印配置*/function watermark(firstNode, secondNode) { //绑定容器 var container = document.getElementsByClassName('elementdiv') if (container.length > 0) { for (var i = container.length - 1; i >= 0; i--) { document.body.removeChild(container[i]) } } var elementWidth = document.documentElement.offsetWidth; //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） var elementHeight = document.documentElement.offsetHeight; //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） var intervalWidth = 340; //设置水印的间隔宽度 var intervalheight = 200; //设置水印的间隔高度 var crosswise = (elementWidth - 60 - 200) / intervalWidth; //水印的横向个数 var lengthways = (elementHeight - 60 - 80) / intervalheight; //水印的纵向个数 //水印默认配置 var watermarkConfiguration = { watermarkFont: '微软雅黑', //水印字体 watermarkColor: 'red', //水印字体颜色 watermarkFontsize: '18px', //水印字体大小 watermarkTransparency: 0.15, //水印透明度 watermarkWidth: 230, //水印宽度 watermarkHeight: 100, //水印长度 watermark_angle: 20 //水印倾斜度数 }; // 创建文档碎片节点(关键代码) var _template = document.createDocumentFragment(); //遍历外层横向个数 for (var i = 0; i < crosswise; i++) { //遍历内层纵向个数 for (var j = 0; j < lengthways; j++) { var xaxis = intervalWidth * i + 26; var yaxis = intervalheight * j + 26; //创建水印 var watermarkDiv = document.createElement('div'); watermarkDiv.id = 'watermarkDiv' + i + j; watermarkDiv.className = 'watermarkDiv'; ///节点创建 var spanFirst = document.createElement('div'); //第一个节点 var spanSecond = document.createElement('div'); //第二个节点 spanFirst.appendChild(document.createTextNode(firstNode)); spanSecond.appendChild(document.createTextNode(secondNode)); watermarkDiv.appendChild(spanFirst); watermarkDiv.appendChild(spanSecond); /*样式配置*/ //设置水印div倾斜显示 watermarkDiv.style.webkitTransform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)"; //针对 safari 浏览器支持 watermarkDiv.style.MozTransform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)"; watermarkDiv.style.msTransform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)"; watermarkDiv.style.OTransform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)"; watermarkDiv.style.transform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)"; watermarkDiv.style.opacity = watermarkConfiguration.watermarkTransparency; //水印透明度 watermarkDiv.style.fontSize = watermarkConfiguration.watermarkFontsize; //水印字体大小 watermarkDiv.style.fontFamily = watermarkConfiguration.watermarkFont; //水印字体 watermarkDiv.style.color = watermarkConfiguration.watermarkColor; //水印颜色 watermarkDiv.style.width = watermarkConfiguration.watermarkWidth + 'px'; //水印宽度 watermarkDiv.style.height = watermarkConfiguration.watermarkHeight + 'px'; //水印高度 watermarkDiv.style.visibility = ""; //看不见但是摸得着。 watermarkDiv.style.position = "absolute"; //水印绝对定位 watermarkDiv.style.left = xaxis + 'px'; //Y轴 watermarkDiv.style.top = yaxis + 'px'; //X轴 watermarkDiv.style.overflow = "hidden"; watermarkDiv.style.zIndex = "9999"; //设置优先级 watermarkDiv.style.pointerEvents = 'none'; //pointer-events:none 让水印不阻止交互事件 watermarkDiv.style.textAlign = "center"; //水平居中 watermarkDiv.style.display = "block"; //显示元素 _template.appendChild(watermarkDiv); //从一个元素向另一个元素中移动元素 } } document.body.appendChild(_template);}二、🛰 VUE 添加水印方法
1、创建 warterMarkVUE.js文件
2、全局使用水印
在
App.vue中引用
<script>import Watermark from "./views/advanced/js/warterMarkVUE";export default { //初始化加载 mounted() { Watermark.set("水香木鱼");//添加水印名称 },}</script>3、局部使用水印
局部引用，把
warterMarkVUE.js文件引用到单页面内即可使用,木鱼在这里就不过多的阐述了。【和全局引用一样，只不过是引用的页面不一样】一个是全局显示、一个是在单页面内显示
4、VUE源码 warterMarkVUE.js
/*水印配置*///声明 let watermark = {}//水印配置 let setWatermark = (str) => { let id = '1.23452384164.123412415' // 移除水印 判断 if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } //创建画布 let createCanvas = document.createElement('canvas') // 设置canvas画布大小 createCanvas.width = 250 //宽度 createCanvas.height = 220 //高度 //创建Context2D对象作为2D渲染的上下文。 let Context2D = createCanvas.getContext('2d') /*水印样式调整配置*/ Context2D.rotate(-20 * Math.PI / 100) // 水印旋转角度 Context2D.font = '20px Vedana' //水印文字大小 Context2D.fillStyle = '#fff' //水印颜色 HEX格式,可使用red 或者rgb格式 Context2D.textAlign = 'center' //水印水平位置 Context2D.textBaseline = 'Middle' //水印垂直位置 Context2D.fillText(str, createCanvas.width / 3, createCanvas.height / 2) //创建元素 let createDiv = document.createElement('div') createDiv.id = id //水印默认设置 createDiv.style.pointerEvents = 'none' //水印层事件穿透 让水印不阻止交互事件 createDiv.style.top = '70px' //水印顶部距离 createDiv.style.left = '0px' //水印左侧距离 createDiv.style.opacity = '0.15' //水印透明度 createDiv.style.position = 'fixed' //水印定位 createDiv.style.zIndex = '100000' //水印样式优先显示 createDiv.style.width = document.documentElement.clientWidth - 100 + 'px' //水印宽度 createDiv.style.height = document.documentElement.clientHeight - 100 + 'px' //水印高度 createDiv.style.background = 'url(' + createCanvas.toDataURL('image/png') + ') left top repeat' //水印显示(关键代码) document.body.appendChild(createDiv) //在指定元素节点的最后一个子节点之后添加节点 return id}// 此方法只允许调用一次watermark.set = (str) => { let id = setWatermark(str) //设置间隔 setInterval(() => { if (document.getElementById(id) === null) { id = setWatermark(str) } }, 500) //改变大小时执行 window.onresize = () => { setWatermark(str) }}export default watermark📖 博主致谢
感谢大家阅读到结尾，本次的文章就分享到这里，总结了【vue添加水印和原生js水印的攻略】，希望可以帮到大家，谢谢。
如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇
🛩往期精彩：
vue实现隐藏浏览器右侧滚动条功能
前端实现el-pagination分页的两种业务场景,你知道吗？
前端开发：颜色代码速查表【英文颜色、HEX格式、RGB格式】
前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
一文图解前端WebSocket 实时通信
