前端实现页面水印

作者：菜鸟追梦旅行 | 2024-02-28 13:40:14

踩

前端实现页面水印


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            list-style: none;
        }
 
        html {
            margin: 0;
            padding: 0;
        }
 
        body {
            margin: 0 !important;
            padding: 0;
            height: auto;
        }
 
        .box {
            width: 100%;
            height: 100vh;
            overflow: scroll;
            border: 1px solid red;
        }
 
        /* 滚动条样式 */
        .box::-webkit-scrollbar {
            width: 10px;
            background: #fff;
        }
 
        .box::-webkit-scrollbar-thumb {
            border-radius: 3px;
            height: 100px;
            background-color: #d5dde8;
            margin-left: 6px;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
    </div>
    <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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/159174