Canvas Blog

给Blog增加水印

Canvas，js

Views:  times Updated on April 10, 2023 Posted by elmagnifico on April 10, 2023

Foreword

突发奇想，想给没写完的Blog加个水印，表示未完工，谨慎查看

水印

// 页面添加水印效果
const setWatermark = (str,width,height,font) => {
    const id = 'watermarkbyelmagnifico';
    if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id));
    const can = document.createElement('canvas');
    can.width = width;
    can.height = height;
    const cans = can.getContext('2d');
    cans.rotate((-20 * Math.PI) / 180);
    cans.font = font;
    cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
    cans.textBaseline = 'Middle';
    cans.fillText(str, can.width / 10, can.height / 2);
    const div = document.createElement('div');
    div.id = id;
    div.style.pointerEvents = 'none';
    div.style.top = '15px';
    div.style.left = '0px';
    div.style.position = 'fixed';
    div.style.zIndex = '10000000';
    div.style.width = `${document.documentElement.clientWidth}px`;
    div.style.height = `${document.documentElement.clientHeight}px`;
    div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;
    document.body.appendChild(div);
    return id;
};



/**

 * 页面添加水印效果
 * @method set 设置水印
 * @method del 删除水印
 */
const watermark = {

    // 设置水印
    set: (str,width,height,font) => {
        let id = setWatermark(str,width,height,font);;
        if (document.getElementById(id) === null) id = setWatermark(str,width,height,font);;
    },

    // 删除水印
    del: () => {
        let id = 'watermarkbyelmagnifico';
        if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id));
    },
};

// 开启水印
watermark.set('To be continued...未完待续',300,250,"23px Brush Script MT")

// 关闭水印
watermark.del()

增加到Blog页面

将上面的代码改成JS，加到页面底部

再增加一个标签用来激活水印，没写完的时候就激活

{% if if page.tobecontinued %}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script type="text/javascript" src="/js/watermark.js"></script>
<script>
    watermark.set('To be continued...未完待续',300,250,"23px Brush Script MT")
</script>
{% endif %}

Summary

未完待续，测试一下，本页面就是样例，还是挺好看的

Quote

https://www.enjoytoday.cn/2022/09/08/%E5%A6%82%E4%BD%95%E7%BB%99web%E9%A1%B5%E9%9D%A2%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%B0%B4%E5%8D%B0/

CATALOG
    FEATURED TAGS
    RaspberryPi 嵌入式 Git 脚本 python LeetCode C++ APM FreeRTOS Markdown Embedded Linux Vim Ubuntu Tools STM32 Maya LPWAN Graph Theory Algorithm PathFind OMPL VPS QT Router JS Chrome Tampermonkey API Java Spring MySql Springboot Docker V2ray TTRSS Nintendo Switch Trace Crack BLHeli DSHOT ESC Music C# EasyCon Blog 杂谈 Proxy UAV GuinnessWorldRecords NAS 群晖 ZeroTier Typora Map 旅游 Log JSON Cython Equip Goods Share DMX512 Blender Game AP Network CloudFlare DIY WIFI Camera Diablo Sensor SES QQ Bot Python Vmq Jenkins 米家 ESP32 Software C MT793x NXP CH32 OpenWrt Onion Copilot Investment ChatGPT Debug RouterOS Mikrotik GitLab Drone OpenAI VS Code 管理
    FRIENDS