Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.