网页加水印 svg 方式
/**
*网页加水印 svg 方式
*
* @export
* @param {*} [{
* container = document.body,
* content = '请勿外传',
* width = '300px',
* height = '200px',
* opacity = '0.2',
* fontSize = '20px',
* zIndex = 1000
* }={}]
*/
function __waterDocumentSvg({
container = document.body,
content = '请勿外传',
width = '120px',
height = '200px',
opacity = '0.2',
fontSize = '20px',
zIndex =
} = {}) {
const args = arguments[];
const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${width}">
<text x="20%" y="20%" dy="12px"
text-anchor="middle"
stroke="#000000"
stroke-width=""
stroke-opacity="${opacity}"
fill="none"
transform="rotate(-45, 100 10)"
style="font-size: ${fontSize};">
${content}
</text>
</svg>`;
const base64Url = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
const __wm = document.querySelector('.__wm');
const watermarkDiv = __wm || document.createElement("div");
const styleStr = `
position:absolute;
top:;
left:;
width:%;
height:%;
z-index:${zIndex};
pointer-events:none;
background-repeat:repeat;
background-image:url('${base64Url}')`;
watermarkDiv.setAttribute('style', styleStr);
watermarkDiv.classList.add('__wm');
if (!__wm) {
container.style.position = 'relative';
container.insertBefore(watermarkDiv, container.firstChild);
}
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
let mo = new MutationObserver(function () {
const __wm = document.querySelector('.__wm');
// 只在__wm元素变动才重新调用 __canvasWM
if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
// 避免一直触发
mo.disconnect();
mo = null;
__waterDocumentSvg(JSON.parse(JSON.stringify(args)));
}
});
mo.observe(container, {
attributes: true,
subtree: true,
childList: true
})
}
} //onload时触发水印绘制
window.onload=function(){
__waterDocumentSvg({content : "申继林"});
};
网页加水印 svg 方式的更多相关文章
- WPF 下两种图片合成或加水印的方式(转载)
来源:http://www.cnblogs.com/lxblog/ 最近项目中应用多次应用了图片合成,为了今后方便特此记下. 在WPF下有两种图片合成的方式,一种还是用原来C#提供的GDI+方式,命名 ...
- 通过js渲染高层级DOM实现网页加水印
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端性能优化(四)——网页加载更快的N种方式
网站前端的用户体验,决定了用户是否想要继续使用网站以及网站的其他功能,网站的用户体验佳,可留住更多的用户.除此之外,前端优化得好,还可以为企业节约成本.那么我们应该如何对我们前端的页面进行性能优化呢? ...
- 20190728-Python爬取视频&切割视频&视频加水印
1.视频爬取 1.下载视频的源码如下: import os import requests from bs4 import BeautifulSoup import threading from bj ...
- Python实用案例,Python脚本,Python实现批量加水印
往期回顾 Python实现自动监测Github项目并打开网页 Python实现文件自动归类 Python实现帮你选择双色球号码 Python实现每日更换"必应图片"为"桌 ...
- 《动手实现一个网页加载进度loading》
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...
- 使用iText对pdf做权限的操作(不允许修改,不允许复制,不允许另存为),并且加水印等
添加水印,并且增加权限 @Test public void addWaterMark() throws Exception{ String srcFile="D:\\work\\pdf\\w ...
- Webbrowser控件判断网页加载完毕的简单方法 (转)
摘自:http://blog.csdn.net/cometnet/article/details/5261192 一般情况下,当ReadyState属性变成READYSTATE_COMPLETE时,W ...
- 《转》如何让你的网页加载时间降低到 1s 内
当初分析了定宽高值和定宽高比这两种常见的图片延迟加载场景,也介绍了他们的应对方案,还做了一点技术选型的工作. 经过一段时间的项目实践,在先前方案的基础上又做了很多深入的优化工作.最终将好奇心日报的网页 ...
随机推荐
- Access-Control-Allow-Origin设置跨域
我来自己写一下答案,以给后来的朋友一点思路和建议:1,首先把Access-Control-Allow-Origin设置成*是不妥的,自己的接口服务器不能允许所有人都可以访问.2,具体哪里可以设置Acc ...
- 伯努利数学习笔记&&Luogu P3711 仓鼠的数学题
新科技 Luogu P3711 题意 设$ S_{k,n}$表示$ \displaystyle\sum_{i=0}^n i^k$ 求多项式$\displaystyle\sum_{k=0}^n S_{k ...
- Pytorch如何用预训练模型提取图像特征
方法很简单,你只需要将模型最后的全连接层改成Dropout即可. import torch from torchvision import models # load data x, y = get_ ...
- pythonのdjango 在控制台用log打印操作日志
在Django项目的settings.py文件中,在最后复制粘贴如下代码: LOGGING = { 'version': 1, 'disable_existing_loggers': False, ' ...
- DBA_TABLES ALL_TABLES USER_TABLES
DBA_TABLES >= ALL_TABLES >= USER_TABLES DBA_TABLES意为DBA拥有的或可以访问的所有的关系表. ALL_TABLES意为某一用户拥有的或可以 ...
- 网络流板子/费用流板子 2018南京I题+2016青岛G题
2018南京I题: dinic,链式前向星,数组队列,当前弧优化,不memset全部数组,抛弃满流点,bfs只找一条增广路,每次多路增广 #include <bits/stdc++.h> ...
- 【easy】235. Lowest Common Ancestor of a Binary Search Tree
题意大概是,找两个节点的最低公共祖先 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNod ...
- Elasticsearch一些使用笔记(持续更新)
这篇博客记录这一些运维ES的一些经验. 1.节点磁盘使用率过高,导致ES集群shard无法分配,丢失数据? 有两个配置,分配副本的时候 参数名称 默认值 含义 cluster.routing.allo ...
- JAVA 导包,使用前面的类~
package Code413;/*1.导包,也就是指出需要使用的类,在什么位置import 包名称,类名称对于与当前同类属于同一个包的情况,可以省略导包语句不写..2.创建,格式:类名称 对象名=n ...
- 面向对象(OOP)基本概念
面向对象(OOP)基本概念 面向对象编程 —— Object Oriented Programming 简写 OOP 目标 了解 面向对象 基本概念 01. 面向对象基本概念 我们之前学习的编程方式就 ...