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方法,并且需要字体文件. 实现 ...
随机推荐
- ansible(三)
setup ansible_all_ipv4_addresses # ipv4的所有地址 ansible_all_ipv6_addresses # ipv6的所有地址 ansible_date_tim ...
- Visual Studio 调试 ---- 系列文章
调试是软件开发过程中非常重要的一个部分,它具挑战性,但是也有一定的方法和技巧. Visual Studio 调试程序有助于你观察程序的运行时行为并发现问题. 该调试器可用于所有 Visual Stud ...
- graylog-docker安装
Graylog安装(docker) 1.安装docker jdk1.8 2.下载docker镜像 docker pull mongo docker pull docker.elastic.co/ela ...
- oVirt-postgresql
连接数据库 方法一: cd /opt/rh/rh-postgresql95/root/bin su postgres ./psql \c engine 执行sql语句即可 方法二: 用pgAdmin访 ...
- 项目Beta冲刺(团队)--7/7
课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺 团队名称:葫芦娃队 作业目标:进行新一轮的项目冲刺,尽力完成并完善项目 团队博客 队员学号 队员昵称 博客地址 04160242 ...
- VoIP基本原理
VoIP基本原理 VoIP是通过Internet等互联网络传递语音信息的,主要包括终端设备.网关.网守和网络管理等部分.网关负责提供IP网络和传统的PSTN接口. VoIP的基本原理:通过语音压缩算法 ...
- java 整理
类和类之间,接口和接口之间是继承:类和接口之间是实现:类只能单继承,接口可以多继承. 1.接口的出现扩展了功能. 2.接口其实就是暴漏出来的规则. 3.接口的出现降低了耦合性,即设备与设备之间实现了解 ...
- vim文本编辑器——删除、复制、剪切、更改某一个字符、替换、撤销、关键字搜索
1.删除: (1)删除光标所在处的字符: 如上图所示:点击一次x键只能删除一个字符. (2)删除光标所在处后的n个字符(nx): 删除前: 输入6x: (3)删除光标所在的行(dd): 删除前: 输入 ...
- golang 几个好用的cli package
cli 开发在golang 的软件开发中占用很大,同时开源的比较好用的cli也很多,以下是整理的几个cli github.com/spf13/cobra 这个比较有名了, 好多框架都使用了这个 以下是 ...
- Problem 3 基站建设 (station.cpp)———2019.10.6
在此郑重的感激wxyww大佬 wxyww tql [题目描述]小 Z 的爸爸是一位通信工程师,他所在的通信公司最近接到了一个新的通信工程建设任务,他们需要在 C 城建设一批新的基站.C 城的城市规划做 ...