水印项目的实现以及两种实现方案的选优入门基础教程_项目小白常识

水印项目我们提出了两种解决方案一、用shadow dom实现1、基本思路通过 attachShadow 这个方法生成一个shadow root 即shadow的根节点,然后在这个根节点下面通过循环语句添加水印,利用position为absolute进行排版,使其铺满容器 show me the code:(function (root, factory) {

水印项目的实现以及两种实现方案的选优入门基础教程

水印项目我们提出了两种解决方案

水印项目的实现以及两种实现方案的选优入门基础教程_项目小白常识

一、用shadow dom实现

1、基本思路

通过 attachShadow 这个方法生成一个shadow root 即shadow的根节点,然后在这个根节点下面通过循环语句添加水印,利用position为absolute进行排版,使其铺满容器

 show me the code:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        /*AMD. Register as an anonymous module.
        *define([], factory); */
        define([], factory());
    } else if (typeof module === 'object' && module.exports) {
        /*Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.*/
        module.exports = factory();

    } else {
        /*Browser globals (root is window)*/
        root['watermark'] = factory();
    }
}(this, function () {

    /*Just return a value to define the module export.*/
    let watermark = {};

    /*加载水印*/
    let loadMark = function () {
        let defaultSettings = {
            watermark_id: 'wm_div_id',          //水印总体的id
            watermark_prefix: 'mask_div_id',    //小水印的id前缀
            watermark_txt: "测试水印",             //水印的内容
            watermark_x: 20,                     //水印起始位置x轴坐标
            watermark_y: 40,                     //水印起始位置Y轴坐标
            watermark_rows: 0,                   //水印行数
            watermark_cols: 0,                   //水印列数
            watermark_x_space: 100,              //水印x轴间隔
            watermark_y_space: 50,               //水印y轴间隔
            watermark_font: '微软雅黑',           //水印字体
            watermark_color: 'black',            //水印字体颜色
            watermark_fontsize: '18px',          //水印字体大小
            watermark_alpha: 0.15,               //水印透明度,要求设置在大于等于0.005
            watermark_width: 100,                //水印宽度
            watermark_height: 100,               //水印长度
            watermark_angle: 15,                 //水印倾斜度数
            watermark_parent_selector: null,  //水印插件挂载的父元素选取器,不输入则默认挂在body上
            need_adapt_screen: false,     // 是否根据屏幕的分辨率等比变化每个水印的宽度和字体大小
            watermark_width_proportion: 15, // 每个水印宽度自适应屏幕变化的等比放大或缩小的值
            watermark_fontsize_proportion: 95, // 每个水印字体大小自适应屏幕变化的等比放大或缩小的值
        };
        let watermark_parent_node = null  //水印插件挂载的父元素element,不输入则默认挂在body上

        let setting = arguments[0] || {};
        /*采用配置项替换默认值,作用类似jquery.extend*/
        if (arguments.length === 1 && typeof arguments[0] === "object") {
            for (let key in setting) {
                if (setting[key] && defaultSettings[key] && setting[key] === defaultSettings[key]) continue;
                /*veronic: resolution of watermark_angle=0 not in force*/
                else if (setting[key] || setting[key] === 0) defaultSettings[key] = setting[key];
            }
        }

        /* 设置水印的容器 */
        if (defaultSettings.watermark_parent_selector) {
            watermark_parent_node = document.querySelector(defaultSettings.watermark_parent_selector)
        } else {
            watermark_parent_node = document.body
        }

        /*如果元素存在则移除*/
        let watermark_element = document.getElementById(defaultSettings.watermark_id);
        if (watermark_element) {
            let _parentElement = watermark_element.parentNode;
            if (_parentElement) {
                _parentElement.removeChild(watermark_element);
            }
        }
        
        /*获取水印的起始位置*/
        let page_offsetTop = 0;
        let page_offsetLeft = 0;
        page_offsetTop = watermark_parent_node.offsetTop || 0;
        page_offsetLeft = watermark_parent_node.offsetLeft || 0;
        page_width = watermark_parent_node.offsetWidth - defaultSettings.watermark_width / 2 || 0;
        page_height = (Math.max(watermark_parent_node.offsetHeight, watermark_parent_node.scrollHeight) - defaultSettings.watermark_height / 2) || 0;
        defaultSettings.watermark_x = defaultSettings.watermark_x + page_offsetLeft;
        defaultSettings.watermark_y = defaultSettings.watermark_y + page_offsetTop;

        /*创建水印外壳div*/
        let otdiv = document.getElementById(defaultSettings.watermark_id);
        let shadowRoot = null;

        if (!otdiv) {
            otdiv = document.createElement('div');

            /*创建shadow dom*/
            otdiv.id = defaultSettings.watermark_id;
            otdiv.style.pointerEvents = "none";

            /*判断浏览器是否支持attachShadow方法*/
            if (typeof otdiv.attachShadow === 'function') {
                shadowRoot = otdiv.attachShadow({mode: 'open'});
            } else if (typeof otdiv.createShadowRoot === 'function') {
                shadowRoot = otdiv.createShadowRoot();
            } else {
                shadowRoot = otdiv;
            }

            watermark_parent_node.appendChild(otdiv)

        } else if (otdiv.shadowRoot) {
            shadowRoot = otdiv.shadowRoot;
        }

        // shadow内加个容器
        let shadowOutDiv = document.createElement('div')
        shadowOutDiv.id = 'shadowContainer'
        shadowRoot.appendChild(shadowOutDiv)


        /*如果将水印列数设置为0,或水印列数设置过大,超过页面最大宽度,则重新计算水印列数和水印x轴间隔*/
        if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
            defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + page_offsetLeft) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
            defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x + page_offsetLeft - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
        }
        /*如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔*/
        if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
            defaultSettings.watermark_rows = parseInt((page_height - defaultSettings.watermark_y + page_offsetTop) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
            defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y + page_offsetTop) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
        }

        let x;
        let y;
        for (let i = 0; i < defaultSettings.watermark_rows; i++) {
            y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
            for (let j = 0; j < defaultSettings.watermark_cols; j++) {
                x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

                let mask_div = document.createElement('div');
                let oText = document.createTextNode(defaultSettings.watermark_txt);
                mask_div.appendChild(oText);
                /*设置水印相关属性start*/
                mask_div.id = defaultSettings.watermark_prefix + i + j;
                /*设置水印div倾斜显示*/
                mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.visibility = "";
                mask_div.style.position = "absolute";
                /*选不中*/
                mask_div.style.left = x + 'px';
                mask_div.style.top = y + 'px';
                mask_div.style.overflow = "hidden";
                mask_div.style.zIndex = "9999999";
                mask_div.style.opacity = defaultSettings.watermark_alpha;
                mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                mask_div.style.fontFamily = defaultSettings.watermark_font;
                mask_div.style.color = defaultSettings.watermark_color;
                mask_div.style.textAlign = "center";
                mask_div.style.width = defaultSettings.watermark_width + 'px';
                mask_div.style.height = defaultSettings.watermark_height + 'px';
                mask_div.style.display = "block";
                mask_div.style['-ms-user-select'] = "none";
                /*设置水印相关属性end*/
                shadowOutDiv.appendChild(mask_div);

            }
        }
    };

    /*初始化水印,添加load和resize事件*/
    watermark.init = function (settings) {
        window.addEventListener('load', function () {
            loadMark(settings);
        });
        window.addEventListener('resize', function () {
            loadMark(settings);
        });
        window.addEventListener('DOMContentLoaded', function () {
            loadMark(settings);
        });

    };

    /*手动加载水印*/
    watermark.load = function (settings) {
        loadMark(settings);
        observerDomReloadMark(settings)
    };

    return watermark;
}))

2、优化

但是毕竟水印是有关安全方面的,如果别人打开开发者模式很轻松的就水印的内容更改甚至完全删除,所以不能就这么完事了。我们需要监听DOM的变化,判断如果用户通过开发者工具手动修改了水印的dom,我们就重新渲染水印,实现水印不能手动进行了修改。

思路:通过mutationObsever监听DOM的变化,判断是否是水印部分的dom 变化,如果是则重新渲染

show me the code:

/* 监听DOM的变化,防止手动删除 */
    let observerDomReloadMark = (settings) => {
        // Select the node that will be observed for mutations
        let observer_node = document.querySelector('#shadowContainer')
        // Options for the observer (which mutations to observe)
        let config = {
            attributes: true,
            childList: true,
            subtree: true
        };
        // Callback function to execute when mutations are observed
        const mutationCallback = (mutationsList) => {
            // for (let mutation of mutationsList) {
            //     let type = mutation.type;
            //     switch (type) {
            //         case "childList":
            //             console.log("A child node has been added or removed.");
            //             break;
            //         case "attributes":
            //             console.log(`The ${mutation.attributeName} attribute was modified.`);
            //             break;
            //         case "subtree":
            //             console.log(`The subtree was modified.`);
            //             break;
            //         default:
            //             break;
            //     }
            // }
            // loadMark(settings)
            console.log(2222)
        };

        // Create an observer instance linked to the callback function
        let observer = new MutationObserver(mutationCallback);

        // Start observing the target node for configured mutations
        observer.observe(observer_node, config);

        // Later, you can stop observing
        // observer.disconnect();
    }

这个方法看起来完美,然而现实很残酷,当我们再浏览器中看效果的时候发现mutationObsever不能监听shadow的变化,what? 查资料后发现shadow是独立于dom树的,相当于被隔离起来的dom。既然如此那就放弃装逼吧,还是老老实实用正常的dom实现吧,有多少个水印就生成多个水印的dom,这必要会导致性能问题。好吧,我们还是再另寻他法。

二、canvas绘图

1、基本思路

通过canvas把单个水印绘制出来,用toDataURL方法生成图片的base64编码,放在水印容器的background-image:url()里面,背景图片会自动铺满整个容器。思想比第一种方案简单很多。

show me the code:

      var canvas = document.createElement('canvas')
      canvas.id = 'canvas'
      canvas.width = defaultSettings.watermark_width // 单个水印的宽度
      canvas.height = defaultSettings.watermark_height // 单个水印的高度
      var ctx = canvas.getContext('2d')
      ctx.font = 'normal 12px Microsoft Yahei' // 设置样式
      ctx.fillStyle = 'rgba(112, 113, 114, 0.2)' // 水印字体颜色
      ctx.translate(canvas.width/2,canvas.height/2)
      ctx.rotate((defaultSettings.watermark_angle * Math.PI) / 180) // 水印偏转角度
      ctx.translate(-canvas.width/2,-canvas.height/2)
      ctx.fillText(defaultSettings.watermark_txt, 30, 20)
      var src = canvas.toDataURL('image/png')

      /* 设置水印的容器 */
      var watermark_parent_node = null
      if (defaultSettings.watermark_parent_selector) {
          watermark_parent_node = document.querySelector(defaultSettings.watermark_parent_selector)
      } else {
          watermark_parent_node = document.body
      }
     watermark_parent_node.style.pointerEvents = 'none'
      // 判断容器是否已经设置了backgroundImage属性值
      if (!watermark_parent_node.style.backgroundImage) {
          watermark_parent_node.style.backgroundImage = 'URL(' + src + ')'
      } else {
          watermark_parent_node.style.backgroundImage = watermark_parent_node.style.backgroundImage + ', URL(' + src + ')'
      }

2、优化

优化思路和第一种方案一样,只不过这种方案的好处就是可以直接监听到变化。

三、两种方案的对比

方案优点缺点
shadow DOM 1、低耦合,shadow dom与原先的DOM树隔离,不会影响到系统本有的功能。

1、shadow DOM不能够被监听到

2、水印文案及DOM被篡改的成本较低

3、实现逻辑比较复杂

canvas绘图

1、实现逻辑比较清晰

2、水印数据生成图片,用户想篡改比较难

3、水印被篡改能够被监听到

 

1、水印图片是被放在background-image里面的,如果原先在class里面设置了background-image属性的话会被覆盖掉

原文:https://my.oschina.net/hrw/blog/3064362

海计划公众号
(0)
上一篇 2020/03/29 01:46
下一篇 2020/03/29 01:46

您可能感兴趣的内容

  • 前端布局方式汇总及概念浅析入门攻略_布局入门基础教程

    一、基础布局方式0. 普通/文档流 布局早期

    , 后来 ,再后来 HTML5 语意化标签按照自上而下的方式顺次排布。1. Float 布局 float: left/right最初设计目的是用于图文环绕排版、不过目前常用于左右布局。2. 绝对布局 position: absolute,position: fixed保持与目标元素(po

    2020/04/05
  • SiteServer CMS使用帮助最强大的企业级开源CMS系统

    SiteServer CMS小白常识 官方网址:https://www.siteserver.cn/ GitHub:https://github.com/siteserver/cm…

    2020/03/06
  • 网站性能延迟加载图像的五种技巧指南教程_技巧小白入门

    网站性能延迟加载图像的五种技巧指南教程 由于图片是web上最流行的内容类型之一,因此网站的页面加载时间很容易成为一个问题。 即使经过适当的优化,图像也会有相当大的重量。这可能会对访…

    2020/03/20
  • 理解Js的作用域和作用域链基础知识入门_作用域教程视频

    作用域和作用域链在Javascript和很多其它的编程语言中都是一种基础概念。但很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要。正确的去理解这个概念有利于你去写更好,更高效和更简洁的代码,让你成为一个更优秀的Javascript开发者。因此,在本文中,我将会向大家解释清楚什么是作用域和作用域链,以及Javascr

    2020/03/20
  • Web前端体系的脉络结构入门基础知识_前端入门教程

    Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍。目的是帮助大家审查自

    2020/04/05
  • 关于Mock.js使用基础教程_数据教程视频

    关于Mock.js使用基础教程 目前在做一个个人网站,写了一半没有数据填充,也不知道写啥了,就顺带学习下mockjs这个东西,官网上主要介绍它是一个可以随机生成各种类型数据,拦截a…

    2020/03/20
  • 面向对象设计与分析攻略教程_面向对象指南教程

    1.什么事面向对象?面向对象方法是一种运用对象,类,继承,封装,聚合,关联,消息,多态等概念和原则来构造软件系统的开发思想(方法)。2.面向对象中的的基本概念:A.对象:把问题域中的事物抽象地表示为系统中的对象,作为系统的基本构成单位。B.属性和操作:用对象的属性表示事物的数据特征;用对象的操作表示事物的行为特征。C.对象的封装:对象的属性与操作结合为一体,

    2020/04/05
  • 基于 React 和 Redux 的 API 集成解决方案菜鸟指南_api入门基础教程

    在前端开发的过程中,我们可能会花不少的时间去集成 API、与 API 联调、或者解决 API 变动带来的问题。如果你也希望减轻这部分负担,提高团队的开发效率,那么这篇文章一定会对你有所帮助。文章中使用到的技术栈主要有:React 全家桶TypeScriptRxJS文章中会讲述集成 API 时遇到的一些复杂场景,并给出对应解决方案。通过自己写的小工具,自动生成

    2020/03/24
  • 学习编程开发基础知识如何学习并掌握一门计算机编程语言_语言菜鸟攻略

    如果你有兴趣编写计算机程序,移动APP,网站,游戏或者任何软件,你应该学习编程。编程语言撰写的代码构建了计算机的程序。这个语言可以让程序让机器运行起来完成特写功能,机器指计算机、智能手机,其它任何的硬件产品中的一种。无论对于何种计算机编程语言,其核心编程思想都是一样的。算法以及解决问题的思想才是核心,编程只是一种实现算法及思想的工作。充分正确的认识这一点,对

    2020/04/03
  • vue 监听组件原生事件小白指南使用vue中的修饰符.native_修饰符使用指南

    vue中.native是什么?.native主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。官方对.native修饰符的解释为:有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如:</my-co

    2020/04/05
  • Zoomove新手入门_一个让你在移动鼠标时动态缩放图像的 jQuery 插件

    Zoomove攻略教程 官方网址:http://thompsonemerson.github.io/zoomove GitHub:https://github.com/thomps…

    2020/03/06
  • Sublime Text菜鸟攻略一个代码编辑器,也是HTML和散文先进的文本编辑器。

    Sublime Text基础入门 官方网址:http://www.sublimetext.com/ 简介描述:一个代码编辑器,也是HTML和散文先进的文本编辑器。 Sublime …

    2020/03/05
  • 深入理解requestAnimationFrame的动画循环入门基础知识_动画使用指南

    一、初识requestAnimationFrame
    requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始、不知道最佳循环间隔时间的问题。它是跟着浏览器的绘制走的,如果浏览器绘制间隔是16.7ms,它就按这个间隔绘制;如果浏览器绘制间隔是10ms, 它就按10ms绘制。这样就不会存在过度绘制的问题,动画不会丢帧。

    2020/03/20
  • 理解MVC,MVP 和 MVVM零基础入门_mvc攻略教程

    MVCMVC模式的意思是,可以分成三个部分视图(View):用户界面。控制器(Controller):业务逻辑模型(Model):数据保存各部分之间的通信方式如下。View 传送指令到 ControllerController 完成业务逻辑后,要求 Model 改变状态Model 将新的数据发送到 View,用户得到反馈Backbone1. 用户可以向 Vi

    2020/03/20
  • prepack-webpack-plugin入门教程_prepack的一个webpack插件

    prepack-webpack-plugin入门教程 GitHub:https://github.com/gajus/prepack-webpack-plugin 简介描述:pre…

    2020/03/11
  • Web布局:浮动菜鸟指南_浮动基础知识入门

    浮动的介绍不知道大家是否和我有同样的一个感觉,每当拿起一篇杂志文章,总能发现左边或右边有图片,文字流畅地围着图片,这就是打印世界中看到的浮动:在Web的世界中,CSS的 float 设计初衷也是用来处理文本围绕图片排版的,就像在杂志布局中一样。碍于当时Web布局可用方案的局限性,聪明的CSSer才把 float 用于Web的布局当中,这一用就用了很多年,直到

    2020/03/24