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:
<div class="watermark" :style="watermarkstyle"></div>

svg轻松实现文字水印的更多相关文章

  1. javaCV开发详解之4:转流器实现(也可作为本地收流器、推流器,新增添加图片及文字水印,视频图像帧保存),实现rtsp/rtmp/本地文件转发到rtmp流媒体服务器(基于javaCV-FFMPEG)

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  2. php 图片加水印文字水印

    /*给图片加文字水印的方法*/ $dst_path = 'http://f4.topitme.com/4/15/11/1166351597fe111154l.jpg';//保证路径正确 $dst = ...

  3. 「Python实用秘技04」为pdf文件批量添加文字水印

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第4期 ...

  4. 本图片处理类功能非常之强大可以实现几乎所有WEB开发中对图像的处理功能都集成了,包括有缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等功能

    import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  5. pdo文字水印类,验证码类,缩略图类,logo类

    文字水印类 image.class.php <?php /** * webrx.cn qq:7031633 * @author webrx * @copyright copyright (c) ...

  6. php 图片添加文字水印 以及 图片合成(微信快码传播)

    1.图片添加文字水印: $bigImgPath = 'backgroud.png'; $img = imagecreatefromstring(file_get_contents($bigImgPat ...

  7. PHP实现文字水印图片

    php实现简单的文字水印图片,使用前需要开启php配置中的gd2功能 <?php/*打开图片*/ //1.配置图片路径 $src="image/55.jpg";//这个路径改 ...

  8. java常用开发工具类之 图片水印,文字水印,缩放,补白工具类

    import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  9. php文字水印和php图片水印实现代码

    本文章向码农们介绍php文字水印和php图片水印实现代码,需要的码农可以参考一下. php 文字水印 文字水印就是在图片上加上文字,主要使用gd库的imagefttext方法,并且需要字体文件. 实现 ...

随机推荐

  1. 【Linux】linux ln文件夹的链接(转)

    1 文件的链接ln -s a.py b.pya.py 软链接到b.py (无论 b.py 文件存在与否 都可以成功)2 文件夹的链接ln -s a ba文件夹软链接到b文件夹(b文件夹不能提前创建) ...

  2. 设置web应用的 context root (转)-- web project setting

    context root确定了Tomcat将那些URL请求转发到Web应用. 如果应用的context root 设置为 myapp,除非存在更为明确context root的Web应用,那么所有 / ...

  3. linux 用户操作命令

    今日思语:看到优秀的人还那么努力,你是否会眼馋~ linux系统上经常会对用户进行一些相关操作,像新增.修改.删除用户等操作. 1.新增用户 useradd 选项 用户 参数说明: • 选项: • - ...

  4. 学习:窗口创建以及消息处理basic.c

    WNDCLASS结构: Windows 的窗口总是基于窗口类来创建的,窗口类同时确定了处理窗口消息的窗口过程(回调函数). 在创建应用程序窗口之前,必须调用 RegisterClass 函数来注册窗口 ...

  5. 同步docker中的容器时间和宿主机相同

    同步docker中的容器时间和宿主机相同.cd /etc/ 在容器中修改下/etc/localtime文件的名称,避免冲突. mv localtime localtime_bak cp /usr/sh ...

  6. 22-1 web传输视频 Opencv+usb摄像头 树莓派+Flask实现视频流媒体WEB服务器

    第一篇 讲解原理 https://blog.miguelgrinberg.com/post/video-streaming-with-flask 第二篇 加入多线程可以直接用 https://gith ...

  7. LeetCode 1249. Minimum Remove to Make Valid Parentheses

    原题链接在这里:https://leetcode.com/problems/minimum-remove-to-make-valid-parentheses/ 题目: Given a string s ...

  8. 在Visual Studio中调试时,如何检查有关进程令牌的详细信息?

    从Visual Studio 2005开始,watch窗口获得了一个伪寄存器,用于调查有关进程令牌的详细信息.所以,你只要开始调试,在监视窗口中写下“$user”, 有时查看特权和组的扩展视图会很有趣 ...

  9. Centrifugo  语言无关的实时消息服务

    Centrifugo 语言无关的实时消息服务,基于golang编写,提供了websocket 以及sockjs 的兼容处理,使用上很简单 同时也支持基于redis的扩展,以下是一个简单的运行测试 环境 ...

  10. apache-maven安装

    1.下载maven 网址:http://maven.apache.org 2.下载maven和安装 由于最新版的可能会有问题,我选择下载旧版本 一般都下载二进制的zip文件 解压后文件夹apache- ...