如何用Vue在网页上巧妙添加个性化长尾词水印？

本文共计421个文字，预计阅读时间需要2分钟。

原文示例：本文字例为大家分享了Vue实现页面添加水印的具体代码，供大家参考。具体内容如下+js文件+创建一个watermark.js文件+let setWatermark=(str1, str2, str3)={+let id='1.23452384164.123412415'+ if (+docume+)

改写后：Vue实现页面添加水印的代码示例，供参考。具体代码如下：创建watermark.js文件，定义setWatermark函数，参数为str1、str2、str3，实现水印功能。

本文实例为大家分享了vue实现页面添加水印的具体代码，供大家参考，具体内容如下

js文件

建一个watermark.js文件

let setWatermark = (str1, str2, str3) => { let id = '1.23452384164.123412415'     if (document.getElementById(id) !== null) {         document.body.removeChild(document.getElementById(id))     }     let can = document.createElement('canvas')     can.width = 270     can.height = 100     let cans = can.getContext('2d')     cans.rotate(-20 * Math.PI / 180)     cans.font = '17px Vedana'     cans.fillStyle = '#666666'     cans.textAlign = 'center'     cans.textBaseline = 'Middle'     cans.fillText(str1, can.width / 2, can.height)     cans.fillText(str2, can.width / 2, can.height + 20)     cans.fillText(str3, can.width / 2, can.height + 40)     let div = document.createElement('div')     div.id = id     div.style.pointerEvents = 'none'     div.style.top = '20px'     div.style.left = '0px'     div.style.opacity = '0.15'     div.style.position = 'fixed'     div.style.width = document.documentElement.clientWidth + 'px'     div.style.height = document.documentElement.clientHeight + 'px'     div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'     document.body.appendChild(div)     return id } // 添加水印 export const setWaterMark = (str1, str2, str3) => {     let id = setWatermark(str1, str2, str3)     if (document.getElementById(id) === null) {         id = setWatermark(str1, str2, str3)     } } // 移除水印 export const removeWatermark = () => {     let id = '1.23452384164.123412415'     if (document.getElementById(id) !== null) {         document.body.removeChild(document.getElementById(id))     } }

页面引入

html添加

:style="{ backgroundImage: `url(${orgBackground})` }"

引入

import { removeWatermark, setWaterMark } from '@/libs/watermark'

data添加

orgBackground: '',

mounted()添加

setWaterMark(str1, str2, str3);

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。