网页水印

发表于

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Watermark Example</title>

<style>

#watermark {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 9999;

pointer-events: none;

}



#watermark span {

font-size: 24px;

color: #ccc;

position: absolute;

transform: rotate(-30deg);

padding:100px;

pointer-events: none;

}

</style>

</head>

<body class="box">

<div id="watermark"></div>

<script>

function createWatermark() {

var watermark = document.getElementById('watermark');

var angle = -30;

var top = -30;

var text = 'My Watermark';



for (var i = 0; i < 10; i++) {

var span = document.createElement('span');

span.style.left = i * 200 + 'px';

span.style.top = i * top + 'px';

span.style.webkitTransform = 'rotate(' + angle + 'deg)';

span.style.MozTransform = 'rotate(' + angle + 'deg)';

span.style.msTransform = 'rotate(' + angle + 'deg)';

span.style.OTransform = 'rotate(' + angle + 'deg)';

span.style.transform = 'rotate(' + angle + 'deg)';

span.appendChild(document.createTextNode(text));

watermark.appendChild(span);

angle += 15;

top += 15;

}

}



createWatermark();



window.addEventListener('resize', function() {

createWatermark();

});



window.addEventListener('scroll', function() {

createWatermark();

});



// 防截图

var canvas = document.createElement('canvas');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

canvas.style.position = 'fixed';

canvas.style.top = 0;

canvas.style.left = 0;

canvas.style.pointerEvents = 'none';

canvas.style.mixBlendMode = 'multiply';

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

ctx.fillRect(0, 0, canvas.width, canvas.height);
  
</script>

<script>
 function addWaterMarker(str, name, number) {
        let can = document.createElement('canvas');
        let body = document.body;
        body.appendChild(can);
        can.width = 180;
        can.height = 150;
        can.style.display = 'none';
        let cans = can.getContext('2d');
        cans.rotate(-20 * Math.PI / 180);
        cans.font = "normal  12px Microsoft JhengHei";
        cans.fillStyle = "rgba(223, 223, 223, 1)";
        cans.textAlign = 'center';
        cans.textBaseline = 'Middle';
        let nameNo = name + ' ' + str;
        cans.fillText(nameNo, can.width / 3, can.height / 2);
        cans.fillText(number, can.width / 2.7, can.height / 1.6);
        let dom = document.querySelector('.box')
        dom.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
        dom.style.backgroundColor = "#fff";

    }
    addWaterMarker('张三', 'Code12345', 1888888888)
</script>
</body>

</html>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注