前端添加水印效果攻略【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">
<!--设置watermark水印容器 -->
<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水印的攻略】，希望可以帮到大家，谢谢。
如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇
🛩往期精彩：
前端实现el-pagination分页的两种业务场景,你知道吗？
前端开发：颜色代码速查表【英文颜色、HEX格式、RGB格式】
