• notice
  • Congratulations on the launch of the Sought Tech site

Vue implements page adding watermark

The example in this article shares the specific code for adding watermarks to the vue implementation page for your reference. The specific content is as follows

js file

Create a watermark.js file

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
}
// add watermark
export const setWaterMark = (str1, str2, str3) => {
    let id = setWatermark(str1, str2, str3)
    if (document.getElementById(id) === null) {
        id = setWatermark(str1, str2, str3)
    }
}
// remove watermark
export const removeWatermark = () => {
    let id = "1.23452384164.123412415"
    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id))
    }
}

page introduction

html add

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

introduce

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

add data

orgBackground: "",

mounted() add

setWaterMark(str1, str2, str3);

Effect

The above is the whole content of this article, I hope it will be helpful to everyone's learning

Original address: https://blog.csdn.net/qq_40518071/article/details/125448677



Tags

Technical otaku

Sought technology together

Related Topic

0 Comments

Leave a Reply

+