vue自定义指令---添加水印

原创

已于 2024-02-19 22:21:17 修改

· 1.3k 阅读

13 ·

版权

文章标签：

#vue.js #javascript #前端

于 2024-02-19 09:56:46 首次发布

本文介绍了如何在Vue3中封装一个名为v-watermark的自定义指令，用于在元素上动态添加水印。同时，文章还涉及了如何处理DOM变化以及实施安全策略，如防止控制台调试和右键菜单功能。

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

基于vue3 分装一个添加水印的自定义指令 v-watermark

1、封装添加水印hook

const globalCanvas = null
const globalWaterMark = null

// watermark 样式
let style = `
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
pointer-events: none;`

const getDataUrl = ({ font, fillStyle, textAlign, textBaseline, text, rotate = -20 }) => {
  font = font || '16px normal'
  fillStyle = fillStyle || 'rgba(180, 180, 180, 0.2)'
  text = text || ''
  const canvas = globalCanvas || document.createElement('canvas')
  const ctx = canvas.getContext('2d') // 获取画布上下文
  ctx.rotate((rotate * Math.PI) / 180)
  ctx.font = font
  ctx.fillStyle = fillStyle
  ctx.textAlign = textAlign || 'left'
  ctx.textBaseline = textBaseline || 'middle'
  ctx.fillText(text, c