svg轻松实现文字水印
1. 水印图片生成采用svg,这样可以运行时生成名字或其他信息的图片
svg模板
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="160px" viewBox="0 0 300 160">
<text x="-100" y="-30" fill='#000' transform = "rotate(-35 240 -200)" fill-opacity='0.03' font-size='40'>I love SVG</text>
</svg>
一定要记得设置透明度(fill-opacity),否则水印会遮挡正文
svg需要转码: https://codepen.io/huashiyiqike/pen/rERBeJ
2. 通过css覆盖在整个页面上
水印元素放到页面大小的容器的最后面
父元素:
position: relative;
水印元素
position: absolute;
top: 0;
bottom: 0; // 整体覆盖
left: 0;
width: 100%;
height: 100%;
z-index: 100;
pointer-events: none; // 对鼠标穿透
3. 通过js拼接svg,并写入模板或者html
js:
this.watermarkstyle = `background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='200px' height='160px' viewBox='0 0 200 160'%3E %3Ctext x='-100' y='-30' fill='%23000' transform = 'rotate(-35 240 -200)' fill-opacity='0.04' font-size='40'%3E${
this.$store.state.authUser.username
}%3C/text%3E %3C/svg%3E ")` html:
svg轻松实现文字水印的更多相关文章
- javaCV开发详解之4:转流器实现(也可作为本地收流器、推流器,新增添加图片及文字水印,视频图像帧保存),实现rtsp/rtmp/本地文件转发到rtmp流媒体服务器(基于javaCV-FFMPEG)
javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...
- php 图片加水印文字水印
/*给图片加文字水印的方法*/ $dst_path = 'http://f4.topitme.com/4/15/11/1166351597fe111154l.jpg';//保证路径正确 $dst = ...
- 「Python实用秘技04」为pdf文件批量添加文字水印
本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第4期 ...
- 本图片处理类功能非常之强大可以实现几乎所有WEB开发中对图像的处理功能都集成了,包括有缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等功能
import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...
- pdo文字水印类,验证码类,缩略图类,logo类
文字水印类 image.class.php <?php /** * webrx.cn qq:7031633 * @author webrx * @copyright copyright (c) ...
- php 图片添加文字水印 以及 图片合成(微信快码传播)
1.图片添加文字水印: $bigImgPath = 'backgroud.png'; $img = imagecreatefromstring(file_get_contents($bigImgPat ...
- PHP实现文字水印图片
php实现简单的文字水印图片,使用前需要开启php配置中的gd2功能 <?php/*打开图片*/ //1.配置图片路径 $src="image/55.jpg";//这个路径改 ...
- java常用开发工具类之 图片水印,文字水印,缩放,补白工具类
import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...
- php文字水印和php图片水印实现代码
本文章向码农们介绍php文字水印和php图片水印实现代码,需要的码农可以参考一下. php 文字水印 文字水印就是在图片上加上文字,主要使用gd库的imagefttext方法,并且需要字体文件. 实现 ...
随机推荐
- JS实现俄罗斯方块
在80后.90后的儿时记忆里,俄罗斯方块是必备的消遣小游戏,它的玩法非常简单基本大家都懂,但如何用编程语言开发一款儿时同款「俄罗斯方块」,恐怕知道的同学就很少啦. 位置掩码和旋转掩码 俄罗斯方块游戏中 ...
- MapReduce如何调优
Map阶段优化 1.在代码书写时优化,如尽量避免在map端创建变量等,因为map端是循环调用的,创建变量会增加内存的消耗,尽量将创建变量放到setup方法中 2.配置调优,可以在集群配置和任务运行时进 ...
- 基于TCP和UDP的Socket通信
TCP的Socket通信 TCP是面向连接的,安全的协议,它是一对一的关系 server client 上面只是单个客户端同服务器通信,可使用多线程编程实现多个客户端的通信 UDP的Socket通信 ...
- 进程控制块 与 task_struct
http://blog.csdn.net/qq_26768741/article/details/54348586 struct task_struct { volatile long state; ...
- [Javascript] Private Variables with IIFEs
An IIFE (immediately invoked function expression) is when a function is called immediately after it ...
- 在Visual Studio中调试时,如何检查有关进程令牌的详细信息?
从Visual Studio 2005开始,watch窗口获得了一个伪寄存器,用于调查有关进程令牌的详细信息.所以,你只要开始调试,在监视窗口中写下“$user”, 有时查看特权和组的扩展视图会很有趣 ...
- [Android] Android studio gradle 插件的版本号和 gradle 的版本号 的对应关系
[Android] Android studio gradle 插件的版本号和 gradle 的版本号 的对应关系 本博客地址: wukong1688 本文原文地址:https://www.cnblo ...
- P3350 [ZJOI2016]旅行者
题目描述 小Y来到了一个新的城市旅行.她发现了这个城市的布局是网格状的,也就是有n条从东到西的道路和m条从南到北的道路,这些道路两两相交形成n*m个路口 (i,j)(1<=i<=n,1&l ...
- C++中list的用法总结
list简介 list 也是顺序容器的一种.只是list 是一个双向链表.使用 list 需要包含头文件 list.双向链表的每个元素中都有一个指针指向后一个元素,也有一个指针指向前一个元素,如下图所 ...
- 避免MySQL出现重复数据处理方法
对于常规的MySQL数据表中可能存在重复的数据,有些情况是允许重复数据的存在,有些情况是不允许的,这个时候我们就需要查找并删除这些重复数据,以下是具体的处理方法! 方法一:防止表中出现重复数据 当表中 ...