vue3实现水印防篡改

共 3,515 字，需阅读 9 分钟

2021/08/12 下午

985 次阅读

在Vue开发中，我们经常需要实现一些特定功能，比如在网站上显示水印以防止内容被篡改。本文将介绍如何使用Vue和一些特定的Hooks来实现水印防篡改功能。

什么是Hooks？

在Vue中，Hooks是一种用于在组件中复用逻辑的方式。它们可以让你在组件之间共享逻辑，从而使代码更加清晰和易于维护。在本文中，我们将使用一个名为useWatermark的自定义Hooks来实现水印防篡改功能。

实现水印防篡改功能

首先，我们需要定义一个名为useWatermark的Hooks。这个Hooks接受两个参数：文本内容和字体大小。然后，它将创建一个带有水印的画布，并将其插入到网页中。这样，无论用户如何修改网页内容，水印都会始终保留在页面上。

        
          
            
            TypeScript
          
          
        
        
          12345678910111213141516171819202122232425262728293031
          import { computed } from 'vue'

interface Props {
    text: string
    fontSize: number
}

export const useWatermark = (props: Props) => {
    return computed(() => {
        const canvas = document.createElement('canvas')
        const devicePixelRatio = window.devicePixelRatio || 1
        const fontSize = props.fontSize * devicePixelRatio
        const font = fontSize + 'px ' + 'Microsoft YaHei'
        const ctx = canvas.getContext('2d')
        ctx!.font = font
        const { width } = ctx?.measureText(props.text) || { width: 0 }
        const canvasSize = Math.max(100, width)
        canvas.width = canvasSize
        canvas.height = canvasSize
        ctx?.translate(canvas.width / 2, canvas.height / 2)
        ctx?.rotate((Math.PI / 180) * -36)
        ctx!.fillStyle = 'rgba(0,0,0,0.3)'
        ctx!.textAlign = 'center'
        ctx!.textBaseline = 'middle'
        ctx!.fillText(props.text, 0, 0)
        return {
            base64: canvas.toDataURL(),
            size: canvasSize / devicePixelRatio
        }
    })
}

在上面的代码中，我们首先创建了一个画布，然后根据用户传入的字体大小和文本内容来绘制水印。最后，我们将水印转换为Base64格式，并返回给调用者。

在Vue组件中使用水印功能

接下来，我们将在Vue组件中使用上述的useWatermarkHooks来实现水印防篡改功能。

        
          
            
            Vue
          
          
        
        
          1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
          <template>
  <div class="watermark" ref="watermarkRef">
    <slot />
  </div>
</template>
  
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useWatermark } from '@/hooks/watremark'
  
interface Props {
    text?: string
    fontSize?: number
}

const props = withDefaults(defineProps<Props>(), {
    text: 'Superficial',
    fontSize: 16
})

const bg = useWatermark(props)
let div: HTMLDivElement | null
const watermarkRef = ref<HTMLDivElement|null>(null)
const resetWatermark = () => {
    if (!watermarkRef.value) {
        return
    }
    if (div) {
        div.remove()
    }
    const { base64, size } = bg.value
    div = document.createElement('div')
    div.style.position = 'absolute'
    div.style.backgroundImage = `url(${base64})`
    div.style.backgroundSize = `${size}px ${size}px`
    div.style.backgroundRepeat = 'repeat'
    div.style.zIndex = '9999'
    div.style.inset = '0'
    div.style.pointerEvents = 'none'
    document.body.style.backgroundImage = 'none'
    watermarkRef.value.appendChild(div)
}
const ob = new MutationObserver((mutations: MutationRecord[]) => {
    for (const entry of mutations) {
        for (const node of entry.removedNodes) {
            if(node === div) {
                resetWatermark()
            }
        }
        // 处理修改
        if (entry.target === div) {
            resetWatermark()
        }
    }
})

onMounted(() => {
    resetWatermark()
    ob.observe(watermarkRef.value!, {
        childList: true,
        subtree: true,
        attributes: true
    })
})

onBeforeUnmount(() => {
    ob.disconnect()
})
</script>
  
<style lang="scss" scoped>
.watermark {
    position: relative;
    flex: 1;
    min-height: 100vh;
}
</style>