Solution of adding explicit watermark to web pages at the front end
In order to prevent information leakage and protect copyright, we often use watermark in the front end.
Of course, watermark can also be divided into bright watermark and dark watermark. Today, we will realize the bright watermark and full screen coverage at the front end.
To create a watermark layer, we need two steps. The first step is to generate the corresponding image. The second step is to put the image on the top layer and display it in full screen. It is better to display multiple watermark contents on the grid page.
1, Generate picture
Because different page sizes are different, people with different identities should also set different watermark information. This requires us to dynamically generate pictures. Here we need to use canvas
function createBackgroundImage(content, proportion, tiltAngle) {
const can = document.createElement('canvas')
can.width = document.body.clientWidth / proportion
can.height = document.body.clientHeight / proportion
const context = can.getContext('2d')
context.rotate(-25 * Math.PI / 180);
context.font = "800 30px Microsoft JhengHei";
context.fillStyle = "#000";
context.textAlign = 'center';
context.textBaseline = 'Middle';
context.fillText(content, 100, 100)
return can.toDataURL("image/png")
}You can create a canvas and fill in text as described above. Then the function returns a corresponding image base64 to us.
It should be noted here that although the input parameters (text, filling proportion and tilt angle) of this method are set according to the proportion of the width and height of cancas, they are not processed on fillText. In practical application, you still need to write them yourself if you adapt to different sizes of screens, and the size of text.
2, Watermark layout
The layout is relatively simple. We need to use the backgroundImage attribute
The background image property sets the background image for the element.
The background of the element occupies the whole size of the element, including the inner margin and border, but excluding the outer margin.
By default, the background image is in the upper left corner of the element and repeats horizontally and vertically.
After that, we just need to add a div tag on the page and set the corresponding style to make it occupy the full screen.
Here is another simple example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
\#content {
width: 100%;
height: 100vh;
margin-left: auto;
margin-right: auto;
background: cadetblue;
overflow: hidden;
}
</style>
</head>
<body>
<div id="content">
</div>
<script>
function createBackgroundImage(content, proportion, tiltAngle) {
const can = document.createElement('canvas')
can.width = document.body.clientWidth / proportion
can.height = document.body.clientHeight / proportion
console.log('can.width', can.width)
console.log('can.height', can.height)
const context = can.getContext('2d')
context.rotate(-25 * Math.PI / 180);
context.font = "800 30px Microsoft JhengHei";
context.fillStyle = "#000";
context.textAlign = 'center';
context.textBaseline = 'Middle';
context.fillText(content, 100, 100)
return can.toDataURL("image/png")
}
const div = document.getElementById('content')
console.log('div', div)
div.style.backgroundImage = `url(${createBackgroundImage('Boyo', 6, 10)})`
</script>
</body>
</html>If you are interested, you can directly copy the above code to see the effect~
Of course, a little basic can cancel the watermark effect by opening the console. At this time, we need to monitor the changes of dom, which we will talk about later~
px: after all, the clear watermark can prevent the gentleman but not the villain. In the next issue, we'll talk about how the dark watermark is realized.