思源笔记编辑器区域水印 JS 代码块分享

前言

鉴于之前使用过的腾讯文档支持文档水印,后来使用思源笔记,在上课展示文档的时候,习惯性会给弄上水印,思源笔记本身似乎不支持直接在编辑器区域添加水印,故自己写了个 JS 代码片段。

iShot2024072918.02.42.png

代码片段

提醒:水印文本比较多的时候,改一下水印的宽度高度即 watermarkWidth、watermarkHeight,否则水印展示不全。

JS 代码片段:

let watermarkContent = "多仔ヾ";
let watermarkWidth = 120;
let watermarkHeight = 70;

let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
canvas.width = watermarkWidth;
canvas.height = watermarkHeight;
ctx.font = "14px Arial";
ctx.fillStyle = "rgba(211, 211, 211, .3)";
ctx.rotate((-25 * Math.PI) / 180);
ctx.fillText(watermarkContent, 0, canvas.height/2);

let watermarkDataURL = canvas.toDataURL('image/png');
const defaultStyle = document.createElement('style');
defaultStyle.innerHTML = `.protyle::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(${watermarkDataURL});
    background-repeat: repeat;
    pointer-events: none;
    z-index: 10;
}`;
document.head.appendChild(defaultStyle);

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22339 引用 • 89387 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • LazyXP

    技术贴,比较好评。

  • 其他回帖
  • 优秀

  • visduo

    秀,哈哈

  • 我让 GPT 改了一下,可以适应更长的文本:

    //编辑器区域水印 JS片段 https://ld246.com/article/1722247445881
    let watermarkContent = "JeffreyChen"; // 设置水印内容
    let watermarkWidth = 120; // 定义水印画布的宽度
    let watermarkHeight = 70; // 定义水印画布的高度
    
    // 创建一个新的canvas元素,用于绘制水印
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext('2d'); // 获取canvas的2D渲染上下文
    
    // 计算旋转角度
    const angle = (-25 * Math.PI) / 180; // 旋转角度转换为弧度
    
    // 保存初始状态
    ctx.save();
    
    // 计算文本的宽度和高度
    ctx.font = "18px Arial"; // 设置字体样式,确保与填充文本一致
    const textWidth = ctx.measureText(watermarkContent).width; // 计算文本宽度
    const textHeight = 18; // 字体大小就是文本的高度
    
    // 设置canvas的大小,考虑到旋转后的文本位置
    canvas.width = Math.max(watermarkWidth, textHeight * Math.abs(Math.sin(angle)) + textWidth * Math.abs(Math.cos(angle)));
    canvas.height = Math.max(watermarkHeight, textHeight * Math.abs(Math.cos(angle)) + textWidth * Math.abs(Math.sin(angle)));
    
    // 清空canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 移动Canvas的原点到中心
    ctx.translate(canvas.width / 2, canvas.height / 2);
    
    // 旋转canvas中的文本
    ctx.rotate(angle); // 执行旋转操作
    
    // 设置填充颜色
    ctx.fillStyle = "rgba(211, 211, 211, .3)"; // 设置填充颜色为浅灰色,并设置其透明度
    
    // 在canvas的指定位置绘制水印文本
    ctx.fillText(watermarkContent, -textWidth / 2, textHeight / 2); // 使文本中心对齐
    
    // 恢复canvas原始状态
    ctx.restore();
    
    // 将canvas内容转为data URL格式的图片
    let watermarkDataURL = canvas.toDataURL('image/png');
    
    // 创建一个style标签用于定义水印样式
    const defaultStyle = document.createElement('style');
    defaultStyle.innerHTML = `
    .protyle::before {
        content: ''; /* 创建一个空的伪元素 */
        display: block; /* 将伪元素设为块级元素 */
        position: absolute; /* 绝对定位,使其覆盖在目标元素上 */
        top: 0; /* 伪元素的上边距设置为0 */
        left: 0; /* 伪元素的左边距设置为0 */
        height: 100%; /* 伪元素的高度设置为100%,覆盖整个目标元素 */
        width: 100%; /* 伪元素的宽度设置为100%,覆盖整个目标元素 */
        background-image: url(${watermarkDataURL}); /* 设置背景图片为之前生成的水印图像 */
        background-repeat: repeat; /* 背景图像重复,形成密集的水印效果 */
        pointer-events: none; /* 禁用伪元素的鼠标事件,确保底层元素可以接收事件 */
        z-index: 2; /* 设置z-index,使其在堆叠上下文中显示在其他元素之上 */
    }`;
    
    // 将样式标签添加到文档的<head>部分
    document.head.appendChild(defaultStyle);
    
    1 回复

推荐标签 标签

  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 477 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1792 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    943 引用 • 943 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 362 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 65 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    286 引用 • 729 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 136 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 51 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 165 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 19 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 628 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 671 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    47 引用 • 25 回帖
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 85 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 617 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 625 关注