前端添加水印效果攻略【vue和原生js添加方式】 |
您所在的位置：网站首页 › excel水印页面背景怎么设置方法不一样 › 前端添加水印效果攻略【vue和原生js添加方式】 |
前端添加水印效果攻略【vue和原生js添加方式】
|
📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜 📜 CSDN主页：水香木鱼 📑 个人博客：陈春波 🎨 系列专栏：后台管理系统 🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝 📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。 期待已久的添加水印方法它来啦!一🚀 喜欢原生js和vue的你,看过来吧。👇 一、🛸原生JS 添加水印方法
注意：全局引用的话，需要在主页面内引入 DOCTYPE html> 原生JS添加水印攻略 //设置水印名称 watermark('水香木鱼', "SXMY") 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 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 添加水印方法
在App.vue中引用 import Watermark from "./views/advanced/js/warterMarkVUE"; export default { //初始化加载 mounted() { Watermark.set("水香木鱼");//添加水印名称 }, } 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 实时通信 |
【本文地址】
今日新闻 |
推荐新闻 |