Java1020
/
watermark.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div id="info" onclick="alert(1)">
        123
    </div>
    <script>
        (function () {
            function __canvasWM({
                container = document.body,
                width = '100px',
                height = '100px',
                textAlign = 'left',
                textBaseline = 'middle',
                font = "25px Microsoft Yahei",
                fillStyle = 'rgba(184, 184, 184, 0.6)',
                content = '水印',
                rotate = '30',
                zIndex = 10000
            }) {
                // 调整间距
                let length = 500
                let h = window.screen.width
                const args = arguments[0];
                const canvas = document.createElement('canvas');

                canvas.setAttribute('width', h);
                canvas.setAttribute('height', 800);
                const ctx = canvas.getContext("2d");

                ctx.textAlign = textAlign;
                ctx.textBaseline = textBaseline;
                ctx.font = font;

                // 测量长度
                let testWidth = ctx.measureText(content).width
                let { a } = hypotenuse(testWidth, rotate)
                console.log(a)
                a = Math.round(a)
                let b
                if (a < h) {
                    b = ((1 - a / h) / 0.02).toFixed(2) + '%'
                    console.log(b);
                } else {
                    b = 0
                }
                ctx.fillStyle = fillStyle;
                ctx.rotate(Math.PI / 180 * rotate);
                // ctx.fillText(content, parseFloat(width) / 100, parseFloat(height) / 100);
                ctx.fillText(content, 0, 250);

                const base64Url = canvas.toDataURL();
                const __wm = document.querySelector('.__wm');

                const watermarkDiv = __wm || document.createElement("div");
                const styleStr = `
                  position:fixed;
                  top:0;
                  left:${b};
                  bottom:0;
                  right:0;
                  width:100%;
                  height:100%;
                  z-index:${zIndex};
                  pointer-events:none;
                  background-image:url('${base64Url}')`;

                watermarkDiv.setAttribute('style', styleStr);
                watermarkDiv.classList.add('__wm');

                if (!__wm) {
                    container.style.position = 'relative';
                    container.insertBefore(watermarkDiv, container.firstChild);
                }

                const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
                if (MutationObserver) {
                    let mo = new MutationObserver(function () {
                        const __wm = document.querySelector('.__wm');
                        // 只在__wm元素变动才重新调用 __canvasWM
                        if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
                            // 避免一直触发
                            mo.disconnect();
                            mo = null;
                            __canvasWM(JSON.parse(JSON.stringify(args)));
                        }
                    });

                    mo.observe(container, {
                        attributes: true,
                        subtree: true,
                        childList: true
                    })
                }

            }

            if (typeof module != 'undefined' && module.exports) {  //CMD
                module.exports = __canvasWM;
            } else if (typeof define == 'function' && define.amd) { // AMD
                define(function () {
                    return __canvasWM;
                });
            } else {
                window.__canvasWM = __canvasWM;
            }
        })();

        // 调用
        __canvasWM({
            content: '霜剑覅耳B和局部将换行符is胡服务高建发股份沟通过而飞机客服呢机场水印'
        });
        function hypotenuse(long, angle) {
            console.log(angle);
            if (angle) {
                console.log('enter');
                return {
                    a: long
                }
            } else {
                //获得弧度
                var radian = 2 * Math.PI / 360 * angle;
                return {
                    a: Math.sin(radian) * long,//邻边
                    b: Math.cos(radian) * long//对边
                };
            }
        }

    </script>
</body>

</html>