vue3 添加水印效果

效果图

水印组件

<template>
    <div class="elementdiv" ref="waterMarkRef">
        <slot></slot>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import Watermark from "@/utils/setWaterMark.js";

let waterMarkRef = ref();
onMounted(() => {
    Watermark.set("dong");
});
</script>

<style lang="less" scoped>
.elementdiv {
    width: 100%;
    height: 100%;
}
</style>

引入的 setWaterMark.js

/*水印配置*/
//声明 
let watermark = {}
    //水印配置 
let setWatermark = (str) => {
    let id = '1.23452384164.123412415'
        // 移除水印 判断
    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id))
    }

    //创建画布
    let createCanvas = document.createElement('canvas')
        // 设置canvas画布大小
    createCanvas.width = 250 //宽度
    createCanvas.height = 220 //高度

    //创建Context2D对象作为2D渲染的上下文。
    let Context2D = createCanvas.getContext('2d')
        /*水印样式调整配置*/
    Context2D.rotate(-20 * Math.PI / 100) // 水印旋转角度
    Context2D.font = '20px Vedana' //水印文字大小
    Context2D.fillStyle = '#fff' //水印颜色 HEX格式,可使用red 或者rgb格式
    Context2D.textAlign = 'center' //水印水平位置
    Context2D.textBaseline = 'Middle' //水印垂直位置
    Context2D.fillText(str, createCanvas.width / 3, createCanvas.height / 2)

    //创建元素
    let createDiv = document.createElement('div')
    createDiv.id = id
        //水印默认设置
    createDiv.style.pointerEvents = 'none' //水印层事件穿透 让水印不阻止交互事件
    createDiv.style.top = '70px' //水印顶部距离
    createDiv.style.left = '0px' //水印左侧距离
    createDiv.style.opacity = '0.75' //水印透明度
    createDiv.style.position = 'fixed' //水印定位
    createDiv.style.zIndex = '100000' //水印样式优先显示
    createDiv.style.width = document.documentElement.clientWidth - 100 + 'px' //水印宽度
    createDiv.style.height = document.documentElement.clientHeight - 100 + 'px' //水印高度
    createDiv.style.background = 'url(' + createCanvas.toDataURL('image/png') + ') left top repeat' //水印显示(关键代码)
    document.body.appendChild(createDiv) //在指定元素节点的最后一个子节点之后添加节点
    return id
}

// 此方法只允许调用一次
watermark.set = (str) => {
    let id = setWatermark(str)
        //设置间隔
    setInterval(() => {
            if (document.getElementById(id) === null) {
                id = setWatermark(str)
            }
        }, 500)
        //改变大小时执行
    window.onresize = () => {
        setWatermark(str)
    }
}

export default watermark

父节点

<template>
    <waterMark>
        <div
            @click="dbPosition"
            class="viewer-container"
            :class="{ active: viewerActive }"
            id="viewer-container"
        >
        </div>
    </waterMark>
</template>
<script setup>

import waterMark from "@/components/waterMark.vue";

</script>    

Vue项目中添加水印可以使用第三方库 `watermarkjs`。下面是添加水印的步骤: 1. 安装 `watermarkjs` ``` npm install watermarkjs --save ``` 2. 在需要添加水印的组件中引入 `watermarkjs` ```javascript import watermark from 'watermarkjs'; ``` 3. 在组件的 `mounted` 生命周期中添加水印 ```javascript mounted() { const options = { initText: 'watermark', // 水印内容 font: '16px Microsoft YaHei', // 字体 opacity: 0.3, // 透明度 rotate: -20, // 旋转角度 color: 'black', // 颜色 mode: 'fixed', // 模式:fixed(固定) or repeat(平铺) width: 200, // 单个水印宽度 height: 200, // 单个水印高度 textAlign: 'center', // 文字对齐方式 textBaseline: 'middle', // 文字基线 }; const watermarkInstance = watermark.init(options); watermarkInstance.loadImage('watermark.png').then(() => { const imgDataUrl = watermarkInstance.getImageDataUrl(); document.querySelector('.watermark').style.backgroundImage = `url(${imgDataUrl})`; }); } ``` 在上面的代码中,我们使用了 `watermark.init()` 方法初始化水印,并设置了一些选项。然后,我们使用 `watermarkInstance.loadImage()` 方法将水印转换为图片,并将其设置为背景图。最后,我们使用 `watermarkInstance.getImageDataUrl()` 方法获取图片的 data url。 4. 在组件的模板中添加水印容器 ```html <template> <div class="watermark-container"> <div class="watermark"></div> <!-- 正常内容 --> </div> </template> ``` 在上面的代码中,我们添加了一个名为 `watermark` 的空 div,用于展示水印。然后,我们将正常的内容放在水印容器的外部。 5. 添加样式 ```css .watermark-container { position: relative; } .watermark { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-repeat: repeat; } ``` 在上面的代码中,我们设置了水印容器的 `position` 为 `relative`,并将水印的 `position` 设置为 `absolute`,以便让水印覆盖在正常内容上方。我们还设置了水印的 `z-index` 为 -1,以确保它在正常内容下方。最后,我们将水印的 `background-repeat` 设置为 `repeat`,以便让水印在容器中平铺。 现在,我们已经成功地在 Vue 项目中添加水印效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值