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

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

前言

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

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

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

    27188 引用 • 113786 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 我让 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

    技术贴,比较好评。

推荐标签 标签

  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 2 关注
  • SVN

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

    29 引用 • 98 回帖 • 700 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    53 引用 • 190 回帖
  • OneNote
    2 引用 • 5 回帖 • 4 关注
  • 笔记

    好记性不如烂笔头。

    312 引用 • 794 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 624 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    90 引用 • 113 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 818 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    10 引用 • 15 回帖 • 2 关注
  • Caddy

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

    10 引用 • 54 回帖 • 181 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    29 引用 • 305 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 553 关注
  • Jenkins

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

    54 引用 • 37 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    498 引用 • 934 回帖
  • B3log

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

    1062 引用 • 3455 回帖 • 139 关注
  • Electron

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

    16 引用 • 143 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 179 关注
  • OnlyOffice
    4 引用 • 26 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    89 引用 • 165 回帖
  • RabbitMQ

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

    49 引用 • 60 回帖 • 353 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 649 关注
  • 自由行
    3 关注
  • OneDrive
    2 引用 • 4 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    212 引用 • 2042 回帖
  • SOHO

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

    7 引用 • 55 回帖 • 1 关注