前端添加水印效果攻略vue和原生js添加方式

Posted 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端添加水印效果攻略vue和原生js添加方式相关的知识，希望对你有一定的参考价值。

💌 作者简介

  1. 📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜

  2. 📜 CSDN主页：水香木鱼

  3. 📑 个人博客：陈春波

  4. 🎨 系列专栏：后台管理系统

  5. 🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝

  6. 📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

期待已久的添加水印方法它来啦!一🚀 喜欢原生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水印的攻略】，希望可以帮到大家，谢谢。

如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇

🛩往期精彩：

vue实现隐藏浏览器右侧滚动条功能

前端实现el-pagination分页的两种业务场景,你知道吗？

前端开发：颜色代码速查表【英文颜色、HEX格式、RGB格式】

前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】

一文图解前端WebSocket 实时通信

以上是关于前端添加水印效果攻略vue和原生js添加方式的主要内容，如果未能解决你的问题，请参考以下文章

前端实现放大镜效果原生js实现vue实现

vue项目中添加水印效果

前端基于dom或者canvas实现页面水印

iOS边练边学--(Quartz2D)图片添加水印

WaterMark.js给网页加水印

前端小程序——js+canvas 给图片添加水印