【瑞模网】前端基于DOM或者Canvas实现页面水印

最新推荐文章于 2025-07-28 11:50:30 发布

原创

最新推荐文章于 2025-07-28 11:50:30 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍在Vue项目中使用DOM和Canvas两种方式实现页面水印。通过自定义指令，详细讲解了基于DOM的实现思路，包括创建水印元素、设置样式和定位。同时探讨了基于Canvas生成水印并利用MutationObserver监听DOM变化以保持水印存在的方法。此外，还提到了使用toDataURL等JS基础知识。

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

前言

我们会看到很多页面带有水印，但是怎么实现呢？当然可以有多种实现方式，本文主要讲解在vue项目中基于DOM或者Cavans实现水印效果，当然还有其他的实现方式，比如在原图片的基础上加上水印生成新的图片，但是这需要后端处理。因为要在vue项目中使用，所以我使用自定义指令可以直接对挂载的dom实现水印效果。

本文实现水印的项目环境为：vue + vite + ts

一、vue自定义指令directive讲解

前面专门有一篇讲解vue2.x与vue3.x中自定义指令详解

二、基于DOM的实现方式

1. 思路整理

获取宽高
（1）获取绑定元素的实际宽度clientWidth
（2）获取绑定元素实际高度clientHeight
（3）获取绑定元素的父元素parentElement

创建盒子
（1）创建一个包裹水印图片的盒子
（2）创建一个水印图片的盒子

设置盒子样式
（1）包裹水印盒子宽高为绑定元素的宽高，即clientWidth、clientHeight
（2）水印盒子设置背景图、旋转度、宽高、点击穿透

设置创建的元素的位置
（1）水印盒子放到包裹水印图片的盒子里（包裹水印图片的盒子包裹水印）
（2）包裹水印图片的盒子放到被绑定元素之前
（3）被绑定元素放到裹水印图片的盒子里（不然被绑定元素与包裹水印图片的盒子层级同级）

2.新建index.vue

将水印的指令放到标签上，设置标签的宽高。水印可以放大div标签上，也可以是img标签上。注意：img才有onload方法，div标签么有。

<script setup lang="ts">
import { ref } from "vue";
</script>
<template>
    <div class="index-content" >
        <div class="watermaker" v-watermark ></div>
         <!-- <img v-watermark style="width:400px;height:400px" src="../assets/vue.svg" alt=""> -->
    </div>
</template>

<style scoped>
.wate