前端生成水印之SVG方式
SVG:可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是一种基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。 SVG由W3C制定,是一个开放标准。
(function () {
// svg 实现 watermark
function __svgWM({
container = document.body,
content = '请勿外传',
width = '300px',
height = '200px',
opacity = '0.2',
fontSize = '20px',
zIndex = 1000
} = {}) {
const args = arguments[0];
const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${width}">
<text x="50%" y="50%" dy="12px"
text-anchor="middle"
stroke="#000000"
stroke-width="1"
stroke-opacity="${opacity}"
fill="none"
transform="rotate(-45, 120 120)"
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:0;
left:0;
width:100%;
height:100%;
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;
__svgWM(JSON.parse(JSON.stringify(args)));
}
}); mo.observe(container, {
attributes: true,
subtree: true,
childList: true
})
} } if (typeof module != 'undefined' && module.exports) { //CMD
module.exports = __svgWM;
} else if (typeof define == 'function' && define.amd) { // AMD
define(function () {
return __svgWM;
});
} else {
window.__svgWM = __svgWM;
}
})();
参考: http://web.jobbole.com/94960/
前端生成水印之SVG方式的更多相关文章
- 网页加水印 svg 方式
/** *网页加水印 svg 方式 * * @export * @param {*} [{ * container = document.body, * content = '请勿外传', * wid ...
- .NET中生成水印更好的方法
.NET中生成水印更好的方法 为了保护知识产权,防止资源被盗用,水印在博客.网店等场景中非常常见. 本文首先演示了基于System.Drawing.Image做正常操作.然后基于Direct2D/WI ...
- Vue——前端生成二维码
与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm np ...
- 前端生成分享海报兼容H5和小程序
### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果
- 前端生成PDF,让后端刮目相看
PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨率.设备等因素没有关系,不论是在Windows,Unix还是在苹果公 ...
- WebGIS中等值线前端生成绘制简析
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 等值线是GIS制图中常见的功能,一般有两种思路:一种是先进行插 ...
- 前端生成二维码 - Javascript生成二维码(QR)
前段时间项目中需要动态的生成二维码,经过评估,前后端生成都可以.但后端生成会有两个问题: 没有找到正规发布出来的后端开源库. 二维码图片,会随着商品的增加而不断变多. 基于以上两个问题,决定在前端生成 ...
- H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...
- Flink assignAscendingTimestamps 生成水印的三个重载方法
先简单介绍一下Timestamp 和Watermark 的概念: 1. Timestamp和Watermark都是基于事件的时间字段生成的 2. Timestamp和Watermark是两个不同的东西 ...
随机推荐
- 在html后面拼接字符串后页面的跳转
我就举一个简单的栗子,主要目的是实现页面跳转时后面获取的参数 <div class="active"> 点击我可以跳转 </div> 样式就随便写一下 之后 ...
- 【单调队列优化dp】 分组
[单调队列优化dp] 分组 >>>>题目 [题目] 给定一行n个非负整数,现在你可以选择其中若干个数,但不能有连续k个数被选择.你的任务是使得选出的数字的和最大 [输入格式] ...
- SQL Pretty Printer for SSMS 很不错的SQL格式化插件
写SQL语句或者脚本时,看到凌乱的格式就头大了,于是决心找一款SQL语句格式化的工具. 功夫不负有心人还真的被我找到一款很好用,很方便的SQL Server插件:SQL Pretty Printer ...
- 通过 txt 文件批量导入需要批量处理的数据的标识字段
前言 在一些工作中,可能需要对数据库中的一些数据(批量)进行处理(修改或者查询),而数据的来源是你的同事,换句话说就是这批数据不可能通过某些查询条件查出来, 而这批数据又比较多,比如几百.几千甚至几万 ...
- 从零开始搭建Webpack+react框架
1.下载node.js Node.js官网下载 , 安装: 安装成功后在控制台输入node -v 可查看当前版本: $ node -v v10.15.0 输入npm -v查看npm版本: $ npm ...
- [LeetCode] 83. Remove Duplicates from Sorted List ☆(从有序链表中删除重复项)
描述 Given a sorted linked list, delete all duplicates such that each element appear only once. Exampl ...
- 【基础】使用cookies,实现免登陆(七)
实现过程: 1.测试网站:www.dx.com 2.登陆后的cookies:"DXSSO","Token=20A0FA7D-XXXX-XXXX-XXXX".至于 ...
- pip更新
python -m ** install -U **
- 深入理解Redis系列之SpringBoot集成Redis
SpringBoot环境 快速搭建一个SpringBoot工程 进入 https://start.spring.io 网站, 使用该网站初始化一个SpringBoot工程 添加相关依赖 因为使用spr ...
- 该 URL“XX”无效。它可能指向不存在的文件或文件夹,或者是指向不在当前网站中的有效文件或文件夹
当使用SharePoint SPWeb.Files.Add()方法往文档库中写入文件时,报 该 URL“XX”无效.它可能指向不存在的文件或文件夹,或者是指向不在当前网站中的有效文件或文件夹, 原因 ...