js和vue添加水印

最新推荐文章于 2024-04-22 11:23:08 发布

小墨宝

最新推荐文章于 2024-04-22 11:23:08 发布

阅读量574

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_38935512/article/details/130739811

版权

原生js
在这里插入图片描述

使用

<!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>

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.js

使用

<script>
import Watermark from "./views/advanced/js/warterMarkVUE";
export default {
    //初始化加载
  mounted() {
    Watermark.set("水香木鱼");//添加水印名称
  },
}
</script>

warterMarkJS.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