HTML 添加 文本水印

    body,
      html {
        margin: 0;
        height: 100vh;
        width: 100vw;
      }
// 自定义文案
      const setting = {
        text: "水印文案", // 水印内容
        innerDate: true, // 在水印下方增加日期
        width: 110, // 水印宽度
      };
      
      // 自定义文字水印
      const watermark = (function () {
        return {
          build: function (arg) {
            // 获取页面宽度
            let maxWidth =
              Math.max(document.body.scrollWidth, window.screen.width) - 20;
            // 获取页面高度
            let maxHeight =
              Math.max(document.body.scrollHeight, document.body.clientHeight) +
              100;
            if (maxHeight === 0) {
              console.info("该页面无需水印");
              return;
            }
            const setting = {
              text: "水印 水印 水印", // 默认水印内容
              beginX: 50, // 默认起始x坐标
              endX: 0, // 默认结束x坐标
              beginY: 50, // 默认起始y坐标
              endY: 0, // 默认结束y坐标
              intervalX: 150, // 默认横向间隔宽度
              intervalY: 100, // 默认纵向间隔高度
              opacity: 0.3, // 字体透明度
              angle: 20, // 字体倾斜度
              fontsize: "15px", // 字体大小
              fontFamily: "微软雅黑", // 字体
              width: 100, // 水印(每个)宽度
              height: 80, // 水印(每个)高度
              innerDate: false, // 是否附带日期
            };
            // 默认变量与自定义变量结合
            if (arguments.length === 1 && typeof arguments[0] === "object") {
              const src = arguments[0] || {};
              for (const key in src) {
                if (!src.hasOwnProperty(key) || !src[key]) {
                  continue;
                }
                for (const def in setting) {
                  if (key === def) {
                    setting[def] = src[key];
                  }
                }
              }
            }
            // 计算列个数
            const cols = parseInt(
              (setting.intervalX + maxWidth - setting.beginX - setting.endX) /
                (setting.width + setting.intervalX) +
                ""
            );
            // 计算行个数
            const rows = parseInt(
              (setting.intervalY + maxHeight - setting.beginY - setting.endY) /
                (setting.height + setting.intervalY) +
                ""
            );
            // 水印内容附加日期
            if (setting.innerDate) {
              const date = new Date();
              setting.text = [
                setting.text,
                "<br>",
                date.getFullYear(),
                "年",
                date.getMonth() + 1,
                "月",
                date.getDate(),
                "日",
              ].join("");
            }
            const fragment = document.createDocumentFragment();
            let x, y;
            for (let i = 0; i < rows; i++) {
              y = setting.beginY + (setting.intervalY + setting.height) * i;
              for (let j = 0; j < cols; j++) {
                x = setting.beginX + (setting.width + setting.intervalX) * j;
                const element = document.createElement("div");
                element.id = "watermark" + i + j;
                // 设置倾斜角
                element.style.MozTransform =
                  "rotate(-" + setting.angle + "deg)";
                element.style.msTransform = "rotate(-" + setting.angle + "deg)";
                element.style.OTransform = "rotate(-" + setting.angle + "deg)";
                element.style.transform = "rotate(-" + setting.angle + "deg)";
                element.style.position = "absolute";
                element.style.left = x + "px";
                element.style.top = y + "px";
                element.style.overflow = "hidden";
                element.style.zIndex = "9999";
                element.style.pointerEvents = "none";
                element.style.opacity = setting.opacity;
                element.style.fontSize = setting.fontsize;
                element.style.fontFamily = setting.fontFamily;
                element.style.color = "#aaa";
                element.style.textAlign = "center";
                element.style.width = setting.width + "px";
                element.style.height = setting.height + "px";
                element.style.display = "block";
                element.innerHTML = setting.text;
                fragment.appendChild(element);
              }
            }
            document.body.appendChild(fragment);
          },
        };
      })();
      watermark.build(setting);

超链接:图片水印

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/928780.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

浅谈——Linux命令入门之前奏

目录 一、备份操作系统 1、快照 2、克隆 二、操作系统的使用注意 1、Linux严格区分大小写 2、Linux 文件“扩展名” 3、Linux 中所有的内容以文件的形式进行保存 4、Linux 中所有的存储设备都必须挂载之后才能使用 5、Linux 系统文件目录的结构 6、Linux 系统文件的目…

牛客linux

1、 统计文件的行数 # 方法 1 wc -l ./nowcoder.txt | awk {print $1} # 方法 2 &#xff0c;awk 可以打印所有行的行号, 或者只打印最后一行 awk {print NR} ./nowcoder.txt |tail -n 1 awk END{print NR} ./nowcoder.txt # 方法 3 grep -c 、-n等等 grep -c "" ./…

“放弃Redis Desktop Manager使用Redis Insight”:日常使用教程(Redis可视化工具)

文章目录 更新Redis Insight连接页面基础解释自动更新key汉化暂时没有找到方法&#xff0c; Redis Desktop Manager在连接上右键在数据库上右键在key上右键1、添加连接2、key过期时间 参考文章 更新 (TωT)&#xff89;~~~ β&#xff59;ё β&#xff59;ё~ 现在在维护另一…

Marvell第四季度营收预计超预期,定制芯片需求激增

芯片制造商Marvell Technology&#xff08;美满电子科技&#xff09;&#xff08;MRVL&#xff09;在周二发布了强劲的业绩预告&#xff0c;预计第四季度的营收将超过市场预期&#xff0c;得益于企业对其定制人工智能芯片的需求激增。随着人工智能技术的快速发展&#xff0c;特…

python使用python-docx处理word

文章目录 一、python-docx简介二、基本使用1、新建与保存word2、写入Word&#xff08;1&#xff09;打开文档&#xff08;2&#xff09;添加标题&#xff08;3&#xff09;添加段落&#xff08;4&#xff09;添加文字块&#xff08;5&#xff09;添加图片&#xff08;6&#xf…

视频监控汇聚平台:Liveweb安防监控平台实现接入监控视频集中管理方案

随着各行业数字化转型的不断推进&#xff0c;视频监控技术在行业内的安防应用及管理支撑日益增多。然而&#xff0c;由于前期规划不清晰、管理不到位等问题&#xff0c;视频监管系统普遍存在以下问题&#xff1a; 1. 各部门单位在视频平台建设中以所属领域为单位&#xff0c;导…

抖音评论系统的实现思路

抖音大家都刷过。点开抖音的一个视频的评论&#xff0c;他会有一个根评论&#xff0c;根评论下面会有子评论&#xff0c;子评论中还有有对子评论的评论。具体如下图&#xff1a; 通过上面的图片可以直观的看见&#xff0c;这三种类型的评论。然后评论是根据时间的倒叙排列的。肯…

4.STM32通信接口之SPI通信(含源码)---软件SPI与W25Q64存储模块通信实战《精讲》

经过研究SPI协议和W25Q64&#xff0c;逐步了解了SPI的通信过程&#xff0c;接下来&#xff0c;就要进行战场实战了&#xff01;跟进Whappy步伐&#xff01; 目标&#xff1a;主要实现基于软件的SPI的STM32对W25Q64存储写入和读取操作&#xff01; 开胃介绍&#xff08;代码基本…

PMP–一、二、三模、冲刺–分类–10.沟通管理

文章目录 技巧十、沟通管理 一模10.沟通管理--1.规划沟通管理--文化意识--军事背景和非军事背景人员有文化差异5、 [单选] 项目团队由前军事和非军事小组成员组成。没有军事背景的团队成员认为前军事团队成员在他们的项目方法中过于结构化和僵化。前军事成员认为其他团队成员更…

「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用

本篇将带你实现一个数字键盘应用&#xff0c;支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。 关键词 UI互动应用数字键盘按钮组件状态管理用户交互 一、功能说明 数字键盘应用将实现以下功能&…

Svn如何切换删除账号

记录Svn清除切换账号 1.首先打开小乌龟的设置如下图 打开设置后单击已保存数据&#xff0c;然后选择清除 接上图选择清除后&#xff0c;就可以打勾选择清除已保存的账号&#xff0c;我们再次检出的就可以切换账号了 &#x1f449;总结 本次记录Svn清除切换账号 如能帮助到你…

7. 一分钟读懂“单例模式”

7.1 模式介绍 单例模式就像公司里的 打印机队列管理系统&#xff0c;无论有多少员工提交打印任务&#xff0c;大家的请求都汇总到唯一的打印管理中心&#xff0c;按顺序排队输出。这个中心必须全局唯一&#xff0c;避免多个队列出现资源冲突&#xff0c;保证打印任务井然有序。…

基于Transformer的编码器-解码器图像描述模型在AMD GPU上的应用

Transformer based Encoder-Decoder models for image-captioning on AMD GPUs — ROCm Blogs 图像描述&#xff0c;即基于生成式人工智能&#xff08;GenAI&#xff09;自动生成简洁的图像文本描述&#xff0c;在现实世界中有着非常重要的应用。例如&#xff0c;图像描述可以为…

Python爬虫——猫眼电影

用python中requests库爬取猫眼电影信息并保存到csv文件中 猫眼专业版 爬取界面 效果预览 代码 import requests import jsonurl1https://piaofang.maoyan.com/dashboard-ajax?orderType0&uuid1938bd58ddac8-02c2bbe3b009ed-4c657b58-144000-1938bd58ddac8&timeStamp…

非对称任意进制转换器(安卓)

除了正常进制转换&#xff0c;还可以输入、输出使用不同的数字符号&#xff0c;达成对数值进行加密的效果 点我下载APK安装包 使用unity开发。新建一个c#代码文件&#xff0c;把代码覆盖进去&#xff0c;再把代码文件添加给main camera即可。 using System.Collections; usin…

【HarmonyOS】鸿蒙应用地理位置获取,地理名称获取

【HarmonyOS】鸿蒙应用地理位置获取&#xff0c;地理名称获取 一、前言 首先要理解地理专有名词&#xff0c;当我们从系统获取地理位置&#xff0c;一般会拿到地理坐标&#xff0c;是一串数字&#xff0c;并不是地理位置名称。例如 116.2305&#xff0c;33.568。 这些数字坐…

OpenGL ES详解——文字渲染

目录 一、文字渲染 二、经典文字渲染&#xff1a;位图字体 1.概念 2.优缺点 三、现代文字渲染&#xff1a;FreeType 1.着色器 2.渲染一行文字 四、关于未来 一、文字渲染 当你在图形计算领域冒险到了一定阶段以后你可能会想使用OpenGL来绘制文字。然而&#xff0c;可能…

C++设计模式之外观模式

动机 下图中左边方案的问题在于组件的客户和组件中各种复杂的子系统有了过多的耦合&#xff0c;随着外部客户程序和各子系统的演化&#xff0c;这种过多的耦合面临很多变化的挑战。 如何简化外部客户程序和系统间的交互接口&#xff1f;如何将外部客户程序的演化和内部子系统…

【Redis篇】 List 列表

在 Redis 中&#xff0c;List 是一种非常常见的数据类型&#xff0c;用于表示一个有序的字符串集合。与传统的链表结构类似&#xff0c;Redis 的 List 支持在两端进行高效的插入和删除操作&#xff0c;因此非常适合实现队列&#xff08;Queue&#xff09;和栈&#xff08;Stack…

RE逆向基础知识及常见题型

通用寄存器 FAX: &#xff08;针对操作数和结果数据的&#xff09;累加器EBX: &#xff08;DS段的数据指针&#xff09;基址寄存器ECX: &#xff08;字符串和循环操作的&#xff09;计数器EDX: &#xff08;I/O指针&#xff09;数据寄存器ESI: &#xff08;字符串操作源指针&a…