vue实现添加水印（给页面添加背景水印、给图片添加水印）

CSDN首页
博客
下载
学习
社区
falsefalsefalse
GitCode
InsCode
vue.js
搜索

会员中心
消息
历史
创作中心
发布
vue实现添加水印（给页面添加背景水印、给图片添加水印）

无知的小菜鸡

于 2023-05-23 09:55:02 发布

阅读量3.3k
收藏 19

点赞数 2
分类专栏： 学习 文章标签： vue.js 前端 javascript
版权

学习
专栏收录该内容
59 篇文章5 订阅
订阅专栏
前言
水印挺常见的，一般就是用来标识来源。下面介绍一下如何实现背景水印和图片水印，水印的核心是canvas，最好对canvas有些了解。

背景水印
参考文章：VUE项目前端页面添加水印 这篇文章写的很详细了，我这里主要是参考该文章自己实现一下。

</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
实体水印
在这里插入图片描述

虚心水印
在这里插入图片描述

渐变水印
在这里插入图片描述

防止水印被取消
文章中提出了一个有意思的如何防止水印被清除掉。对于开发人员很清楚，水印实际上就是一个背景图，在控制台了把背景取消就可以被清除掉。

一种方法是不允许打开控制台，这个需要监听键盘、监听鼠标右键。取消掉其默认行为就好。

main?.addEventListener(‘contextmenu’, (event) => {
event.preventDefault();
});
1
2
3
另一种方法就是文章中提供的MutationObserver，通过监听dom树的变化来实现

// 监听水印的变化
const handleWatermark = () => {
// 获取需要观察的节点
const target = document.querySelector(‘.main’);
// 观察器配置
const config = {
attributes: true, // 监听目标元素属性的变化
childList: true, // 监听目标原型子节点的变化
subtree: false // 是否观察后代的变化。默认false
};
// 创建观察器
const observer = new MutationObserver((abc) => {
// console.log(abc);
// 获取背景图片
const bgi = target?.style?.backgroundImage;
console.log(‘背景的值：’, bgi);
if (!bgi) {
// 当背景被取消后，重新添加
initWatermark();
}
});
// 开始观察
observer.observe(target, config);
// 停止观察
// observer.disconnect()
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
在这里插入图片描述

给图片添加水印
就以csdn为例，当上传图片后，图片会自动添加上水印。
基本原理是：

拿到上传的图片
将图片绘制到画布上
在画布上添加水印
将画布转为图片
将新的图片数据传给后台
下面是一个简单的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
效果
在这里插入图片描述

文章知识点与官方知识档案匹配，可进一步学习相关知识
Vue入门技能树首页概览39308 人正在系统学习中

无知的小菜鸡

微信公众号

分享前端知识

无知的小菜鸡
关注

2

19
打赏

1

专栏目录
Vue实现页面添加水印功能
10-16
今天小编就为大家分享一篇Vue实现页面添加水印功能，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端添加水印的vue组件
12-15
这是一个添加水印的vue组件，支持传入富文本和标签。只需要传入你想添加的水印内容，会自动去计算水印的数量和大小。其他的完全不用你去关心。 使用方法：在你需要的地方向引用组件一样引用它就ok了 watermark 水印的内容 代码很简答，如果有特殊需要可以直接打开代码自行修改。 另外如需在线预览文档，我同样也上传了相应的资源
聊一聊如何在 Vue 项目中实现水印功能
12-21
这种方案就是将原图片添加水印之后生成了新图片,后续在前端页面进行展示是后端接口不返回原图片,而是返回带有水印的图片即可。 这种方式最大的优点就是安全,因为水印图片是后端生成的,前端只需要负责展示即可,不需考虑多余的问题,且即便在…
vue - vue中实现对图片添加水印和截图的功能_vue 图片加水印-CSDN博 …
12-20
1,形参file是拿到的图片的base64格式和其他的一些信息; 2,添加水印主要使用this.base64AddWaterMaker()这个方法进行操作,返回的是一个promise可以使用await进行接收也可以直接在then里面拿到返回的base64图片文件; 3,canvas.getContext(‘2…
vue项目添加水印
最新发布
a99101的博客
424
因为是在app.vue文件中添加的，生命周期函数部分只执行一次。需要在组件更新时候进行判断。也可以利用路由守卫，在路由中进行判断。我是通过登录后用户名是否存在来判断。
vue给页面添加水印，或者给iframe添加水印
06-23
vue给页面添加水印，或者给iframe添加水印
vue水印功能_vue watermark
12-21
第二步:在需要水印的页面引入 在你需要水印的vue页面进行引入该文件 例: // 页面内容编写区// 引入水印jsimportwaterMarkfrom"…/utils/waterMark"exportdefault{name:“app”,}// 样式编写区 1 2 3 4 5 6 …
Vue3 实现网页背景水印功能
12-21
首先我们来看这样一个水印功能的实现思路,通常是在我们原有的网页上附上一个 DIV 层,将它设置绝对定位铺满整个窗口,然后 z-index 值尽量往大了设,保证让水印层处于当前网页所有元素的上面,又不影响当前网页的操作。
【JavaScript源代码】vue实现页面添加水印效果.docx
12-29
vue实现页面添加水印效果 　　最近在做项目的时候要求给页面加上水印效果，废话不多说直接上代码：　　export function watermark(settings) {　　 debugger;　　 //默认设置　　 var defaultSettings={　　 watermark_txt:“text”,　　 watermark_x:20,//水印起始位置x轴坐标　　 watermark_y:20,//水印起始位置Y轴坐标　　 watermark_rows:5,//水印行数　　 watermark_cols:10,//水印列数　　
vue - vue中实现对图片添加水印和截图的功能
qq_43886365的博客
6039
vue中使用cavans对图片添加水印 和 使用html2canvas.js实现图片的截图功能
vue3 项目添加水印的实现方法_watermark vue3
12-19
vue3 项目添加水印的实现方法 实现原理 通过在 canvas 上绘制出字体,设置好样式,然后以图片的样式导出,最后用图片作为水印层的背景图。 实现效果 全屏实现 实现方法 (1)在src下创建一个util文件夹,创建一个watermark.ts文件…
前端vue实现页面加水印文字 单个页面所有页面加水印
12-7
前端vue实现页面加水印文字, 可以实现系统所有页面加水印,也可以单个页面加水印, 可更改水印颜色, 阅读全文下载完整组件代码请关注微信公众号: 前端组件开发 效果图如下: ### 使用方法 使用方法 /... vue 项目页面增加水印 dmr123456的博客 8402 vue添加水印 vue 项目实现水印效果 柠檬不萌只是酸i 1318 目录 （1）新建waterMark.js文件 （2）页面使用 （1）新建引入 waterMark.js文件 'use strict' let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getE... vue项目中页面添加水印_vue里对每个页面都增加水印的方法 12-22 watermark_y:20,//水印起始位置Y轴坐标 watermark_rows:5,//水印行数 watermark_cols:10,//水印列数 watermark_x_space:100,//水印x轴间隔 watermark_y_space:100,//水印y轴间隔 watermark_color:'#aaa',//水印字体颜色 ... 【vue】 前端vue2 全局水印效果_vue 水印效果 12-21 【vue】 前端vue2 全局水印效果 最近写项目遇到一个需求,全局显示水印,不管在哪个路由都要显示。 想要实现的效果: 新建shuiyin.js文件 // 定义水印函数constaddWatermark=({container=document.body,// 水印添加到的容器,默认为 body... vue项目中页面添加水印 zhao_ren的博客 1105 vue项目中页面添加水印 前端添加水印 山岗下的星空的博客 1151 });// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >${} });// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >} });// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div > vue 在图片上加水印_vue 图片添加水印 12-20 在Vue中给图片添加水印可以通过自定义指令来实现。下面是一个示例的自定义指令,可以给图片添加水印: // 创建一个自定义指令 Vue.directive('watermark', { bind:function(el, binding) { 水印js插件 10-17 实现水印效果，防止盗版。实现水印效果，防止盗版实现水印效果，防止盗版实现水印效果，防止盗版 给图片添加水印 11-13 用java实现给图片添加水印,代码简单可用 单个图片和批量图片添加自定义内容水印小程序 07-28 还在为自己写的博客内容被人随意转载吗？ 只需使用该小程序 即可添加属于自己的水印内容 JS用层实现为图片添加水印效果 09-02 JS用层实现为图片添加水印效果 JS前端基于canvas给图片添加水印 01-18 前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。 canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。 在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实是一个Blob对象（更精确的说是File对象，特殊的Blob对象）；而在页面上展示一个图片使用的是img标签；绘制功能用canvas实现。添加水印的功能需要在img标签、ca watermark.js生成文字水印或图片水印 07-08 生成文字水印或者是图片水印，需求是可预览水印，水印文字可自行赋值，图片可自己上传进行赋值就可，如果要添加其他种类水印，在watermarkjs里可自行添加测试，从其他博客找的进行了修改 前端页面加水印watermark.js 01-11 不影响原有的点击或选中事件 watermark({ watermark_txt: ‘水印文字’,watermark_id:‘需要加水印的标签id’}); vue给打印文件添加水印 09-14 要在Vue项目中给打印文件添加水印，你可以按照以下步骤进行操作： 1. 首先，在项目中安装 `watermark-dom` 插件。可以通过 npm 或 yarn 安装，具体命令如下： npm install watermark-dom 或 yarn add watermark-dom 2. 在需要添加水印的组件中，导入 `watermark-dom` 插件。可以在 `mounted` 生命周期函数中进行导入，然后使用 `Watermark.set` 方法设置水印。你可以通过获取用户的姓名和手机号来动态生成水印的内容。示例代码如下： javascript import Watermark from ‘watermark-dom’; export default { mounted() { let userInfo = JSON.parse(sessionStorage.getItem(“HouseholdInfo”)); let watermarkContent = ${userInfo.userName} ${userInfo.userPhone}; Watermark.set(watermarkContent); }, }; ```3. 在打印文件时，水印已经添加到页面上了。你可以使用浏览器的打印功能打印文件，水印会显示在打印的页面上。 注意：在使用 watermark-dom 插件前，确保你已经安装了 vue 和 watermark-dom 的依赖。 这样，你就可以在Vue项目中给打印文件添加水印了。希望对你有帮助！ 引用了水印插件的安装步骤。 引用了设置水印的代码示例。
“相关推荐”对你有帮助么？

非常没帮助

没帮助

一般

有帮助

非常有帮助
关于我们
招贤纳士
商务合作
寻求报道

400-660-0108

kefu@csdn.net

在线客服
工作时间 8:30-22:00
公安备案号11010502030143
京ICP备19004658号
京网文〔2020〕1039-165号
经营性网站备案信息
北京互联网违法和不良信息举报中心
家长监护
网络110报警服务
中国互联网举报中心
Chrome商店下载
账号管理规范
版权与免责声明
版权申诉
出版物许可证
营业执照
©1999-2023北京创新乐知网络技术有限公司
目录
前言
背景水印
防止水印被取消
给图片添加水印
创作活动