vue项目中水印添加

最新推荐文章于 2024-12-04 19:54:51 发布

哇噻你好

最新推荐文章于 2024-12-04 19:54:51 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_59717072/article/details/129555611

文章讲述了在JavaScript中添加水印时遇到的问题，如不同页面ID的限制，以及窗口缩放和hover事件导致的水印叠加问题。解决方案包括使用不同的ID和管理水印的添加事件。此外，水印内容包含当前用户名和时间，分为两行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先新增水印的js文件，这里的id值我使用的时候发现两个页面不能用同一个id，只能使用不同的，有知道什么原因的大佬可以指点一下。

这里的window.onresize会随着你页面放大缩小还有hover事件而去添加，每次都会增加会导致你放大缩小的时候水印叠加，所以不需要的可以注释掉。

然后就是简单的调用水印的js方法了。

我添加的水印内容是当前登录用户名字，加当前时间，本身设置成两个参数所以用户名字跟时间分两行去显示。由于项目原因没有把效果发上来，大家可以参考

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

哇噻你好

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3 - 实现给图片加入水印效果，支持给图像自定义水印文字、大小、排列方式、放大预览等（附带详细运行示例，无任何第三方插件一键复制运行查看效果）详细的代码及注释！

高级前端工程师

05-09

4688

vue3图片水印，vue3图像加水印效果并且能预览，vue3给图像图片设置水印，vue3图片列表添加水印，vue3给图片加上水印，vue3如何给图像增加水印效果，在vue3项目中怎么让图片带上水印，vue3给图片加水印，vue3+ts实现给图片增加水印，vue3 图片添加水印好用的插件有哪些，vue3中添加文字或图片水印，Vue3实现页面添加水印功能，vue3如何实现上传图片添加水印，vue3 图片添加水印，Vue3 中给图片添加时间水印，vue3怎么加图案水印，vue3给超多图片一键加入水印，vue3 项

网站添加水印功能【java#HTML】

qq_32469419的博客

11-27

1009

网站增加水印功能话不多说，最近做的一个项目，需要用到一个水印功能，直接贴js代码和效果图自己先写一个js， JS代码部分： function waterMark(settings) { if($(".mask_div").length>0) return; //默认设置 var defaultSettings = { watermark_txt: "text", watermark_x: 20, //水印起始位置x轴坐标 water

参与评论您还未登录，请先登录后发表或查看评论

vue上传图片添加水印（图片、文字）

m0_48334955的博客

03-22

779

需求需要上传图片时添加水印，oss提供了一些加后缀的办法，但只是页面上展示加上了水印，预览大图和上传到服务器上还是没有，所以要用canvas实现，如图。

Vue实现页面添加水印功能

12-13

创建watermark.js文件 let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } //创建一个画布 let can = document.createElement('canvas'); //设置画布的长宽 can.width = 120; can.he

vue 项目中添加水印效果

weixin_43299180的博客

02-26

6653

在项目中有给部分区域或者是整个页面添加水印的需求。加水印其实很简单，它的原理是使用 canvas 生成图片在使用 toDataURL 转化为 base64 格式，然后将转换后的图片设置为背景图，从而实现水印的效果。下面是结合我在项目里的需求实现水印的方法：一、自定义指令： 1、在 directives 文件夹下面创建一个 watermark.js 文件 import Vue from 'vue'; export default () => { Vue.directive('watermark'

Vue项目添加水印

bly802337的博客

01-13

1897

Vue项目添加水印 1、使用背景图添加水印缺点：会被后续的div模块覆盖步骤1：创建watermark.js文件 /** 水印添加方法 */ let setWatermark = (str1, str2) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(i

vue项目添加全局水印或某个指定页面水印源码

怎样过不是过的博客

03-29

1593

vue项目的页面添加水印,效果如图 index.vue import watermark from "./watermark"; mounted() { watermark.set('我是水印啦'); }, destroyed() { watermark.set(''); //为了清除页面返回时，其它页面也有水印 }, watermark.js let watermark = {} let setWatermark = (str) => { let id = '..

前端Vue添加水印功能

11-17

本文将深入探讨如何在Vue项目中实现这一功能。首先，我们需要了解Vue的基础知识。Vue.js采用组件化开发，通过声明式渲染来简化DOM操作。它允许我们创建可复用的组件，这些组件可以独立地处理自己的视图和逻辑。Vue...

vue 水印添加

weixin_46463643的博客

09-15

785

vue 页面添加水印

vue实现上传图片添加水印

qq_45729353的博客

04-19

1071

实现效果:可添加logo.(注:这里主要实现添加水印.图片上传用的vant的上传)将上传的file文件转成base64(代码如下)

vue项目加水印

small_33的博客

03-21

299

vue项目加水印

Vue3预览pdf（增加水印&禁止下载）

lgsoul666的博客

03-22

1971

根据后端返回的base64位pdf编码，预览pdf文件同时增加水印，禁止下载功能。

vue项目中页面添加水印

zhao_ren的博客

07-11

1456

vue项目中页面添加水印

通过js给网页加上水印背景

AugustDY的专栏

11-28

931

watermark({watermark_txt: '自定义水印'}); function watermark(settings) { //默认设置 var defaultSettings={ watermark_txt:"text", watermark_x:20,//水印起始位置x轴坐标 watermark_y:20,//...

【Vue】Vue项目，根据登录用户给所有页面添加水印

Owen的博客

06-15

2292

最近做了一个需求，给项目中所有的页面加上“当前登录人”的水印，找了一些资料，总结了两种可用方案，已在项目中测试有效。

vue中实现图片上传添加自定义水印并下载

chi1130的博客

11-21

5114

前言最近看了一篇用 Angular4+ 写的添加水印功能，觉得挺好玩，就自己试着用 vue 写一个相同功能效果 LIVE ☀️???????????? 在线例子 ????????☃️❄️ 代码 ✈️✈️✈️✈️✈️✈️ 直达完整代码 ????✈️???????????????? <div class="wrap"> <div class="optea"> <div class="file-upload"&gt...

vue中在指定的元素上添加多行水印(可用于弹窗)

最新发布

by_Ftao的博客

12-04

345

1.用到的是canvas做的(首先在utils文件中创建Watermark.js文件),把下面代码放到utils目录下Watermark.js文件中。2.在用到页面引入这个方法。

VUE项目前端页面添加水印

窝儿卡母Here~

06-28

5311

前端页面添加水印

vue项目文件预览添加水印

07-22

在Vue项目中为文件预览添加水印可以通过以下步骤实现： 1. 首先，安装一个用于生成水印的第三方库，例如 `watermarkjs`。可以使用npm或者yarn来进行安装： ```bash npm install watermarkjs --save ``` 2. 在需要进行文件预览的组件中导入 `watermarkjs`： ```javascript import watermark from 'watermarkjs'; ``` 3. 在文件预览之前，生成水印并将其叠加到预览的图片上。可以在组件的 `mounted` 钩子函数中完成这个操作： ```javascript mounted() { // 获取预览图片的DOM对象 const previewImage = document.getElementById('preview-image'); // 生成水印 watermark([previewImage]) .image(watermark.text.lowerRight('Your Watermark', '20px Arial', '#fff', 0.5)) .then(function (img) { // 替换原始预览图片 previewImage.src = img.src; }); } ``` 在上述代码中，我们首先获取了预览图片的DOM对象，然后使用 `watermarkjs` 生成了一个水印，并将其叠加到预览图片上。其中，`watermark.text.lowerRight()` 函数用于生成位于右下角的文本水印，可以根据需要调整水印文本、字体、颜色和透明度。最后，将生成的带有水印的图片替换原始的预览图片。请确保在代码中适当地设置预览图片的ID，以便在 `getElementById` 方法中正确地获取DOM对象。这样，当文件预览组件被加载时，水印将会自动添加到预览的图片上。