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

本贴最后更新于 338 天前,其中的信息可能已经时过境迁

前言

鉴于之前使用过的腾讯文档支持文档水印,后来使用思源笔记,在上课展示文档的时候,习惯性会给弄上水印,思源笔记本身似乎不支持直接在编辑器区域添加水印,故自己写了个 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);
  • 思源笔记

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

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

    26155 引用 • 108658 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

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

  • 我让 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 回复
  • visduo via macOS

    秀,哈哈

  • LazyXP

    技术贴,比较好评。

推荐标签 标签

  • OneDrive
    2 引用 • 6 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3455 回帖 • 150 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 50 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 507 关注
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 394 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    98 引用 • 903 回帖 • 1 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 696 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖 • 1 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 34 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 755 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    240 引用 • 224 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖 • 1 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    229 引用 • 476 回帖
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 823 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 661 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 86 关注
  • sts
    2 引用 • 2 回帖 • 241 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    440 引用 • 1238 回帖 • 591 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 367 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 3 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 2 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 605 关注
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 277 关注