【网站添加批量水印】前端如何实现水印功能_前端水印

网站添加水印怎么弄？今天教给大家前端如何实现水印功能，前端实现添加水印其实很简单。

大家只需要把一段代码添加到网站前端的全局底部footer.php文件里

代码如下

<script>

    const setWatermark = (str, id, dom) => {

        if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id));

        const can = document.createElement('canvas');

        can.width = 200;

        can.height = 130;

        const cans = can.getContext('2d');

        cans.rotate((-20 * Math.PI) / 180);

        cans.font = '14px Vedana';

        cans.fillStyle = 'rgba(200, 200, 200, 0.30)';

        cans.textBaseline = 'middle';

        cans.fillText(str, can.width / 10, can.height / 2);

        let div;

        if (dom) {

            div = document.querySelector('.' + dom);

        } else {

            div = document.createElement('div');

            div.style.width = `${document.documentElement.clientWidth}px`;

            div.style.height = `${document.documentElement.clientHeight}px`;

            div.style.top = '0px';

            div.style.left = '0px';

            div.style.position = 'fixed';

            document.body.appendChild(div);

        }

        div.id = id;

        div.style.pointerEvents = 'none';

        div.style.zIndex = '10000000';

        div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;

        return id;

    };

    setWatermark('极光资源网', '1');

</script>

添加了这个代码 就可以了，大家自行修改 setWatermark('极光资源网', '1'); 这里面的文字"极光资源网"就是水印内容了。

以上就是【网站添加批量水印】前端如何实现水印功能_前端水印的全部内容了,希望能够帮助到你，找建站教程记得来极光资源网！