V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Sponsored by
LinkedIn
2000 个不用坐班的远程好工作在召唤你 · 弹性上班不打卡,工作和生活都能拥有
2000 个不用坐班的全球远程工作,帮助 V2EX 的小伙伴开启全新的工作方式。
Promoted by LinkedIn
tyx1703
V2EX  ›  分享创造

写了一个给网页添加水印的库

  •  
  •   tyx1703 ·
    YanxinTang · 2019-05-07 19:22:27 +08:00 · 3376 次点击
    这是一个创建于 1236 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Github

    Demo

    介绍

    Watermark 是一款方便快捷的给网页添加水印的库。目前可以设置的内容有:文本内容,文字颜色,字体,字体大小,旋转角度,行高。

    原理

    将设置好的文字,按照设置的样式绘制在 canvas 上面,利用.toDataURL()这个方法把 canvas 转成 base64,最后在 css 中设置其作为背景

    最后

    第一次写 js 的库,不知道什么地方需要注意,还请各位不吝赐教~😜

    13 条回复    2019-05-09 14:56:07 +08:00
    xiaoxiuaoliang
        1
    xiaoxiuaoliang  
       2019-05-07 22:18:24 +08:00 via Android   ❤️ 1
    提个建议,支持水印置于顶层放置。因为有些场景下水印需要总是显示,不能被元素的背景颜色覆盖。
    tyx1703
        2
    tyx1703  
    OP
       2019-05-07 23:03:46 +08:00
    感谢,不过其实这种情况下可以把遮挡元素增加一点背景透明度,就不会造成完全覆盖了。
    @xiaoxiuaoliang
    paranoiagu
        3
    paranoiagu  
       2019-05-08 07:52:13 +08:00 via Android   ❤️ 1
    收了,有用。另外,1 楼说的有道理,水印置于顶层,设置半透明。
    tyx1703
        4
    tyx1703  
    OP
       2019-05-08 08:38:10 +08:00 via iPhone
    @paranoiagu 嗯好的。我想一下如何实现
    unizheng
        5
    unizheng  
       2019-05-08 10:16:46 +08:00
    建议增加一些防护机制,防止水印被简单的关闭、篡改(比如删除 style 属性,修改值等)。
    tyx1703
        6
    tyx1703  
    OP
       2019-05-08 10:52:51 +08:00
    @unizheng 现在有的,通过 MutationObserver 监测 background 属性变化
    wly19960911
        7
    wly19960911  
       2019-05-08 13:56:57 +08:00   ❤️ 1
    background style 加个 !important,防止被 css 优先级覆盖。
    zxq2233
        8
    zxq2233  
       2019-05-08 14:01:45 +08:00   ❤️ 1
    dispay:none
    解决一切
    tyx1703
        9
    tyx1703  
    OP
       2019-05-08 15:26:37 +08:00
    @wly19960911 嗯嗯,有道理👍


    @zxq2233 哈哈,display:none; 都没有内容了,也就不需要水印了😄
    xibidix
        10
    xibidix  
       2019-05-09 10:03:42 +08:00 via iPhone   ❤️ 1
    不错哈
    tyx1703
        11
    tyx1703  
    OP
       2019-05-09 11:14:18 +08:00
    @xibidix 😜感谢
    jinzhe
        12
    jinzhe  
       2019-05-09 14:23:22 +08:00
    ```js
    var canvas = document.createElement("canvas");
    canvas.width = 600;
    canvas.height = 600;
    var ctx = canvas.getContext("2d");
    ctx.rotate((-25 * Math.PI) / 180);
    ctx.fillStyle = "rgba(100,100,100,.4)";
    ctx.textAlign = "center";
    ctx.font = "40px Airal";
    ctx.fillText("https://zee.kim", 600 / 3, 600 / 2);
    // ctx.rotate((20 * Math.PI) / 180); //坐标系还原
    console.log(canvas.toDataURL("image/png"));
    ```

    之前做在线打印奖状做过类似效果
    tyx1703
        13
    tyx1703  
    OP
       2019-05-09 14:56:07 +08:00
    @jinzhe 嗯,原理差不多。我这个加了画布的大小根据里面内容大小自适应的功能来满足自定义的需求
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2406 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 04:14 · PVG 12:14 · LAX 21:14 · JFK 00:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.