How to draw a watermark on an area in a vue project

This article mainly introduces how the vue project to draw watermarks on a certain area, the article is very detailed, has a certain reference value, interested friends must read it!

First of all, take a look at the effect:

In fact, the principle is very simple, that is, use canvas to draw a picture, and then set the background of div. Here, referring to the ideas of others and according to my own needs, a plug-in is encapsulated, which can be used directly in the project. Here, you can set a watermark for a single area:

'use strict' const watermark = {} / * * @ param {the content of the watermark to be set} str * @ param {the container that needs to set the watermark} container * / const setWatermark = (str, container) = > {const id =' 1.23452384164.123412415' if (container = undefined) {return} / / check whether there is any on the page Delete if (document.getElementById (id)! = = null) {const childelement = document.getElementById (id) childelement [XSS _ clean] .removeChild (childelement)} var containerWidth = container.offsetWidth / / get parent container width var containerHeight = container.offsetHeight / / get parent container height container.style.position = 'relative' / / set layout to relative layout / / create canvas element (make a back first Scene) const can = document.createElement ('canvas') can.width = 390 / / set the width of each block can.height = 200 / / height const cans = can.getContext (' 2d') / / get canvas canvas cans.rotate (- 20 * Math.PI / 180) / / rotate π / 9 cans.font counterclockwise = '20px Vedana' / / set font cans.fillStyle =' rgba 200,200,0.20)'/ / sets the font color cans.textAlign = 'left' / / text alignment cans.textBaseline =' Middle' / / text baseline cans.fillText (str, 0 4 * can.height / 5) / / draw text / / create a div element const div = document.createElement ('div') div.id = id / / set id div.style.pointerEvents =' none' / / cancel all events div.style.top = '0px' div.style.left =' 0px' div.style.position = 'absolute' div.style.zIndex =' 100000' div.style.width = containerWidth + 'px' div.style.height = containerHeight +' px' div.style.background = 'url (' + can.toDataURL ('image/png') +') left top repeat' container.appendChild (div) / append to the page return id} / / this method allows only one call to watermark.set = (str) Container) = > {let id = setWatermark (str, container) setInterval (() = > {if (document.getElementById (id) = null) {id = setWatermark (str, container)}}, 500) / listen for page size changes _ window.onresize = () = > {setWatermark (str, container)}} export default watermark

Usage on the page:

Introduce the plug-in:

Import Watermark from'@ / external/watermark'

Then set the refs= "xxx" where you need it, because you can't get the element directly by document.getElement in the vue project, you can only get it through this.$refs.xxx:

Then write this in the hook function of mounted:

/ / set the page watermark Watermark.set ('University Party and Government Cloud record Management platform' + this.name, this.$refs.directrecordwp). The above is all the contents of the article "how to draw a watermark on a certain area in the vue project". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!