文档章节

js生成页面水印

o
 osc_1ee7cxmx
发布于 2018/08/06 21:13
字数 651
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

路:

  1. 获取想要插入水印的文档节点的顶点坐标值x,y。

  2. 获取文档节点的高度heigt和宽度width。

  3. 用div包裹文字来生成水印。

  4. 定义好div的长宽高间距等各种属性。

  5. 定义虚拟节点createDocumentFragment()包裹水印文档。
  6. 先进行行(hang)循环,一行一行生成水印,以x,y为初始坐标,生成一个top为y,left为x,自带宽高的一列水印。每生成一行,y的值递增(高度加行距),x的值重置为初始值。

  7. 再进行列循环,一列一列生成水印,每生成一列,x的值递增(宽度加间距)。

  8. 通过append方法插入每个水印节点。

  9. 将水印append到最开始想要插入的文档节点中去。

代码:

function watermark(element, config) {
    // 获取元素的坐标
    function getOffset(el){
        if (el.offsetParent) {
            return {
                x: el.offsetLeft + getOffset(el.offsetParent).x,
                y: el.offsetTop + getOffset(el.offsetParent).y,
            };
        }
        return {
            x: el.offsetLeft,
            y: el.offsetTop,
        };
    }
    if (!element) return;
    // 默认配置
    const _config = {
        text1: 'text',   //文本1
        text2: 'text',   // 文本2
        start_x: 0,      // x轴起始位置
        start_y: 0,      // y轴起始位置
        space_x: 100,    // x轴间距
        space_y: 50,     // y轴间距
        width: 210,      // 宽度
        height: 80,      // 长度
        fontSize: 20,    // 字体
        color: '#aaa',   // 字色
        alpha: 0.4,      // 透明度
        rotate: 15,       // 倾斜度
    };
    // 替换默认配置
    if(arguments.length === 2 && typeof arguments[1] ==="object" ) {
        const src = arguments[1] || {};
        for(let key in src) {
            if (src[key] && _config[key] && src[key] === _config[key]){
                continue;
            } else if (src[key]){
                _config[key] = src[key];
            }
        }
    }
    // 节点的总宽度
    const total_width = element.scrollWidth;
    // 节点的总高度
    const total_height = element.scrollHeight;
    // 创建文本碎片,用于包含所有的插入节点
    const mark = document.createDocumentFragment();
    // 水印节点的起始坐标
    const position = getOffset(element);
    let x = position.x + _config.start_x, y = position.y + _config.start_y;
    // 先循环y轴插入水印
    do {
        // 再循环x轴插入水印
        do {
            // 创建单个水印节点
            const item =  document.createElement('div');
            item.className = 'watermark-item';
            // 设置节点的样式
            item.style.position = "absolute";
            item.style.zIndex = 99999;
            item.style.left = `${x}px`;
            item.style.top = `${y}px`;
            item.style.width = `${_config.width}px`;
            item.style.height = `${_config.height}px`;
            item.style.fontSize = `${_config.fontSize}px`;
            item.style.color = _config.color;
            item.style.textAlign = 'center';
            item.style.opacity = _config.alpha;
            item.style.filter = `alpha(opacity=${_config.alpha * 100})`;
            // item.style.filter = `opacity(${_config.alpha * 100}%)`;
            item.style.webkitTransform = `rotate(-${_config.rotate}deg)`;
            item.style.MozTransform = `rotate(-${_config.rotate}deg)`;
            item.style.msTransform = `rotate(-${_config.rotate}deg)`;
            item.style.OTransform = `rotate(-${_config.rotate}deg)`;
            item.style.transform = `rotate(-${_config.rotate}deg)`;
            item.style.pointerEvents = 'none';    //让水印不遮挡页面的点击事件
            // 创建text1水印节点
            const text1 = document.createElement('div');
            text1.appendChild(document.createTextNode(_config.text1));
            item.append(text1);
            // 创建text2水印节点
            const text2 = document.createElement('div');
            text2.appendChild(document.createTextNode(_config.text2));
            item.append(text2);
            // 添加水印节点到文本碎片
            mark.append(item);
            // x坐标递增
            x = x + _config.width + _config.space_x;
        // 超出文本右侧坐标停止插入
        } while (total_width + position.x > x + _config.width);
        // 重置x初始坐标
        x = position.x + _config.start_x;
        // y坐标递增
        y = y + _config.height + _config.space_y;
    // 超出文本底部坐标停止插入
    } while (total_height + position.y > y + _config.height);
    // 插入文档碎片
    element.append(mark);
}

使用:

const element = document.getElementById('content');
watermark(element);

 效果:

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

JIT的Profile神器JITWatch

点击上方的蓝字关注我吧 程序那些事 简介 老是使用命令行工具在现代化社会好像已经跟不上节奏了,尤其是在做JIT分析时,使用LogCompilation输出的日志实在是太大了,让人望而生畏。有没有什么...

flydean
07/04
0
0
运维基础--虚拟机的使用(一)

虚拟机的使用 开始使用Linux操作系统时,首先可能会接触到两个主要的界面:GUI和CLI,即图形界面个命令界面,而运维一般极少使用到图形界面。 一、命令提示符的格式:[root@mylab11~] # roo...

osc_9os5791s
22分钟前
25
0
以程序员的方式,尽绵薄之力

作为程序员,我们不能冲在第一线,参与病毒防疫工作,我们希望通过我们的方式,让更多的人获取到关于疫情的有用的消息,正确的消息 虽然github可能是个相对小众的平台,对于非程序员来说,可...

Jipson
01/26
17
0
Oracle 等待事件之 db file scattered read

db file scattered read 官网解释: This event signifies that the user process is reading buffers into the SGA buffer cache and is waiting for a physical I/O call to return. A db......

osc_qlj7m2h9
23分钟前
19
0
互联网+时代的畅想

封面的台风卫星照片,我认为很形象地可以看作互联网的那一波浪潮。在智能手机普及的初始阶段,还记得我们对于互联网的狂热,有人说要用互联网颠覆一切,亦有人要用互联网干一切事情,当然,这...

zd200572
2015/09/02
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部