Tip: After the article is written, the table of contents can be automatically generated. For how to generate it, please refer to the help document on the right.
Article directory
- Preface
- 1. Display effect
- 2. Usage steps
-
- 1. Create a new waterMark.js file
- 2. Introduce display on home page
- Summarize
Foreword
Product manager’s needs: Watermark display on PC and mobile terminals, supporting custom content, font size, font, tilt, transparency, left and right spacing, top and bottom spacing
1. Display effect
2. Usage steps
1. Create a new waterMark.js file
The code is as follows (example):
'use strict';
const watermark = {<!-- -->};
let timeId = null
/**
* watermark
* @param {*} params watermark configuration
* @returns
*/
const setWatermark = (params) => {<!-- -->
const {<!-- -->
rotate = '-10',
opacity = '0.6',
x_space = 150,
y_space = 150,
fontSize = 16,
fontFamily = 'Microsoft YaHei',
text,
id = 'watermark_0001'
} = {<!-- -->
rotate: params.rotate, // watermark angle
opacity: 1 - params.opacity * 1, // watermark transparency
x_space: params.x_space, // watermark interval width
y_space: params.y_space, // watermark interval height
fontSize: params.fontSize, // watermark font
fontFamily: params.fontFamily,
text: params.text, // watermark content
id: params.id // Watermark content
};
let el = document.getElementById(id)
if (!el) {<!-- -->
el = document.createElement('div')
el.id = id
document.body.appendChild(el);
}
const {<!-- --> width, height } = textSize(text, fontSize, fontFamily); // Get the height of the text
const elWidth = el.offsetWidth; // Get the width of the parent container
const elHeight = el.offsetHeight; // Get the width of the parent container
let allWater = document.getElementsByClassName(id + 'cus_water');
let len = allWater.length;
// Clear all watermark elements
for (let i = 0; i < len; i + + ) {<!-- -->
allWater[0] & amp; & amp; allWater[0].parentNode.removeChild(allWater[0]);
}
//Create virtual element
const oTemp = document.createDocumentFragment();
//The number of watermarks adapts to the element area size
const cols = Math.ceil(elWidth / (x_space + width));
const rows = Math.ceil(elHeight / (y_space + height));
for (let i = 0; i < rows; i + + ) {<!-- -->
const y = (height + y_space) * i;
for (let j = 0; j < cols; j + + ) {<!-- -->
const x = (width + x_space) * j;
let div = document.createElement('div');
div.className = id + 'cus_water';
div.innerHTML = text;
//Set the watermark div to display tiltedly
div.style.MozTransform = 'rotate(' + rotate + 'deg)';
div.style.msTransform = 'rotate(' + rotate + 'deg)';
div.style.OTransform = 'rotate(' + rotate + 'deg)';
div.style.transform = 'rotate(' + rotate + 'deg)';
//Set the watermark origin
const origin = rotate < 0 ? 'right top' : 'left bottom'
div.style.MozTransformOrigin = origin;
div.style.msTransformOrigin = origin;
div.style.OTransformOrigin = origin;
div.style.transformOrigin = origin;
div.style.position = 'absolute';
div.style.left = x + 'px';
div.style.top = y + 'px';
div.style.overflow = 'hidden';
div.style.zIndex = '1000';
// pointer-events:none makes the watermark not block the click event of the page
div.style.pointerEvents = 'none';
// Compatible with transparency settings below IE9
div.style.filter = `alpha(opacity=${<!-- -->opacity})`;
div.style.opacity = opacity;
div.style.fontSize = fontSize;
div.style.fontFamily = fontFamily;
div.style.color = 'rgb(200, 200, 200)';
div.style.textAlign = 'center';
div.style.width = width + 'px';
div.style.height = height + 'px';
div.style.display = 'block';
oTemp.appendChild(div);
}
}
el.style.overflow = 'hidden';
el.style.pointerEvents = 'none';
el.style.zIndex = '9999';
el.appendChild(oTemp);
return id
};
// Get the height and width of the text
function textSize(text, fontSize, fontFamily) {<!-- -->
const id = 'textStyle_1_00';
let span = document.createElement('span');
let width = span.offsetWidth;
let height = span.offsetHeight;
span.style.visibility = 'hidden';
span.style.fontSize = fontSize;
span.style.fontFamily = fontFamily;
span.style.display = 'inline-block';
span.id = id;
document.body.appendChild(span);
span.innerHTML = text;
width = parseFloat(window.getComputedStyle(span).width) - width;
height = parseFloat(window.getComputedStyle(span).height) - height;
span.parentNode.removeChild(span);
span = null
return {<!-- -->
width,
height
};
}
// This method is only allowed to be called once
watermark.set = (options) => {<!-- -->
let id = setWatermark(options);
clearInterval(timeId)
timeId = null
timeId = setTimeout(() => {<!-- -->
if (document.getElementById(id) === null) {<!-- -->
id = setWatermark(options);
}
}, 500);
// Monitor page size changes
window.onresize = () => {<!-- -->
setWatermark(options);
};
};
export default watermark;
2. Home page introduction display
The code is as follows (example):
<template>
<el-container style="height: 100%">
<div class="main_water" id="watermark_0001" v-cloak></div>
</el-container>
</template>
<script>
import Watermark from '@/utils/waterMark'
export default {<!-- -->
name: 'Layout',
data() {<!-- -->
return {<!-- -->
};
},
mounted() {<!-- -->
this.setWater()
},
methods: {<!-- -->
//Set watermark
setWater() {<!-- -->
Watermark.set({<!-- -->
rotate: 15, // watermark angle
x_space: 150, //Watermark interval width
y_space: 150, // watermark interval height
fontSize: '16px', // watermark font
fontFamily: 'Microsoft Yahei', // watermark
text: 'I am Zhao Wait', // watermark content
opacity: '0.5',
id: 'watermark_0001'
});
}
}
};
</script>
<style lang="scss" scoped>
.main_water {<!-- -->
position: fixed;
top: 60px;
right: 20px;
left: 20px;
bottom: 20px;
pointer-events: none;
}
</style>
The watermark is introduced on the homepage and displayed on the top layer. Vue is used in the project.
Summary
If there are any shortcomings, please give me your advice!