Native js
- use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strategy for adding watermark in native JS</title>
<!-- quote watermark -->
<script src="./js/warterMarkJS.js"></script>
<style>
</style>
</head>
<body style="height: 600px">
<!--Set watermark watermark container -->
<div class="elementdiv"></div>
<script>
//Set watermark name
watermark('Shuixiangmuyu', "SXMY")
</script>
</body>
</html>
- warterMarkJS.js
/*watermark configuration*/
function watermark(firstNode, secondNode) {
//bind container
var container = document. getElementsByClassName('elementdiv')
if (container. length > 0) {
for (var i = container. length - 1; i >= 0; i--) {
document.body.removeChild(container[i])
}
}
var elementWidth = document.documentElement.offsetWidth; //Returns the width of the element (including element width, inner margin and border, excluding outer margin)
var elementHeight = document.documentElement.offsetHeight; //Returns the height of the element (including element height, inner margin and border, excluding outer margin)
var intervalWidth = 340; //Set the interval width of the watermark
var intervalheight = 200; //Set the interval height of the watermark
var crosswise = (elementWidth - 60 - 200) / intervalWidth; //The horizontal number of watermarks
var lengthways = (elementHeight - 60 - 80) / intervalheight; //The vertical number of watermarks
//Watermark default configuration
var watermarkConfiguration = {
watermarkFont: 'Microsoft Yahei', //watermark font
watermarkColor: 'red', //watermark font color
watermarkFontsize: '18px', //watermark font size
watermarkTransparency: 0.15, //watermark transparency
watermarkWidth: 230, //watermark width
watermarkHeight: 100, //watermark length
watermark_angle: 20 //Watermark tilt degree
};
// Create document fragment node (key code)
var _template = document. createDocumentFragment();
//Traverse the number of horizontal lines in the outer layer
for (var i = 0; i < crosswise; i ++ ) {
//Traverse the inner vertical number
for (var j = 0; j < lengthways; j ++ ) {
var xaxis = intervalWidth * i + 26;
var yaxis = intervalheight * j + 26;
//Create watermark
var watermarkDiv = document. createElement('div');
watermarkDiv.id = 'watermarkDiv' + i + j;
watermarkDiv.className = 'watermarkDiv';
///Node creation
var spanFirst = document.createElement('div'); //first node
var spanSecond = document.createElement('div'); //second node
spanFirst.appendChild(document.createTextNode(firstNode));
spanSecond.appendChild(document.createTextNode(secondNode));
watermarkDiv.appendChild(spanFirst);
watermarkDiv.appendChild(spanSecond);
/*style configuration*/
/ / Set the watermark div tilt display
watermarkDiv.style.webkitTransform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)"; // support for safari browser
watermarkDiv.style.MozTransform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)";
watermarkDiv.style.msTransform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)";
watermarkDiv.style.OTransform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)";
watermarkDiv.style.transform = "rotate(-" + watermarkConfiguration.watermark_angle + "deg)";
watermarkDiv.style.opacity = watermarkConfiguration.watermarkTransparency; //watermark transparency
watermarkDiv.style.fontSize = watermarkConfiguration.watermarkFontsize; //watermark font size
watermarkDiv.style.fontFamily = watermarkConfiguration.watermarkFont; //watermark font
watermarkDiv.style.color = watermarkConfiguration.watermarkColor; //watermark color
watermarkDiv.style.width = watermarkConfiguration.watermarkWidth + 'px'; //watermark width
watermarkDiv.style.height = watermarkConfiguration.watermarkHeight + 'px'; //watermark height
watermarkDiv.style.visibility = ""; // invisible but tangible.
watermarkDiv.style.position = "absolute"; //Watermark absolute positioning
watermarkDiv.style.left = xaxis + 'px'; //Y axis
watermarkDiv.style.top = yaxis + 'px'; //X axis
watermarkDiv.style.overflow = "hidden";
watermarkDiv.style.zIndex = "9999"; //Set priority
watermarkDiv.style.pointerEvents = 'none'; //pointer-events:none Let the watermark not prevent interactive events
watermarkDiv.style.textAlign = "center"; //Horizontally centered
watermarkDiv.style.display = "block"; //display elements
_template.appendChild(watermarkDiv); //Move elements from one element to another
}
}
document.body.appendChild(_template);
}
vue.js
- use
<script>
import Watermark from "./views/advanced/js/warterMarkVUE";
export default {
//initial loading
mounted() {
Watermark.set("Shuixiangmuyu");//Add watermark name
},
}
</script>
- warterMarkJS.js
/*watermark configuration*/
// statement
let watermark = {}
//watermark configuration
let setWatermark = (str) => {
let id = '1.23452384164.123412415'
// Remove the watermark Judgment
if (document. getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
// create canvas
let createCanvas = document.createElement('canvas')
// Set the canvas canvas size
createCanvas.width = 250 //width
createCanvas.height = 220 //height
//Create a Context2D object as the context for 2D rendering.
let Context2D = createCanvas. getContext('2d')
/*Watermark style adjustment configuration*/
Context2D.rotate(-20 * Math.PI / 100) // watermark rotation angle
Context2D.font = '20px Vedana' //Watermark text size
Context2D.fillStyle = '#fff' // watermark color HEX format, red or rgb format can be used
Context2D.textAlign = 'center' //Watermark horizontal position
Context2D.textBaseline = 'Middle' //Watermark vertical position
Context2D.fillText(str, createCanvas.width / 3, createCanvas.height / 2)
//Create elements
let createDiv = document. createElement('div')
createDiv.id = id
//Watermark default settings
createDiv.style.pointerEvents = 'none' //Watermark layer event penetration so that the watermark does not prevent interactive events
createDiv.style.top = '70px' //Watermark top distance
createDiv.style.left = '0px' // left distance of watermark
createDiv.style.opacity = '0.15' // watermark transparency
createDiv.style.position = 'fixed' //Watermark positioning
createDiv.style.zIndex = '100000' //The watermark style is displayed first
createDiv.style.width = document.documentElement.clientWidth - 100 + 'px' //watermark width
createDiv.style.height = document.documentElement.clientHeight - 100 + 'px' //watermark height
createDiv.style.background = 'url(' + createCanvas.toDataURL('image/png') + ') left top repeat' //Watermark display (key code)
document.body.appendChild(createDiv) //Add a node after the last child node of the specified element node
return id
}
// This method is only allowed to be called once
watermark.set = (str) => {
let id = setWatermark(str)
//set the interval
setInterval(() => {
if (document. getElementById(id) === null) {
id = setWatermark(str)
}
}, 500)
// Execute when the size is changed
window.onresize = () => {
setWatermark(str)
}
}
export default watermark