背景word和wps将桌面客户端中的富文本编辑器做到了极致, 但他们的设计初衷就是做一款单机的文件处理软件, 对于多人协作等需求的支持并不能较好的支持
对于一些简单的场景, 我们也不需要word所提供的全部功能, 而是需要支持更多互联网数据格式, 存储本分更加方便, 能供提供多人协同编辑功能的轻量级富文本编辑器
基于浏览器的富文本编辑器就是在这样的设计思路下产生的，其中最典型的代表产品有 Google Docs
这些基于浏览器的富文本编辑器都有以下特点：
利用 Web 技术开发，需要在浏览器环境中使用；
功能相对 Word 更加简单，只保留了最常用的富文本编辑功能；
支持图片、附件、视频、音频、地图等多种互联网资源；
可以将文档备份在网盘中，实现多端同步；
文档可以分享查看，可以进行多人实时协同编辑。 当然基于浏览器的富文本编辑器，也是经过了几轮的技术迭代和创新，才到了今天这种百花齐放的局面。
基于浏览器的富文本编辑器的四要素在现代的浏览器框架下，利用 Web 技术开发一款富文本编辑器，一般采用经典 MVC 模型，根据数据模型渲染视图，视图操作通过控制器修改数据模型。具体要解决以下 ...
浏览器的进程模型进程: 程序运行需要自己专属的内存空间, 可以将进程简单理解为这块内存空间每个应用至少有一个进程, 进程之间相互独立
线程 : 一个进程至少有一个线程, 进程开启后会自动创建一个线程来运行代码, 该线程称之为主线程
浏览器的进程浏览器是一个多进程多线程的应用程序
最主要的进程
浏览器进程主要负责界面显示, 用户交互, 子进程管理 等. 浏览器内部会启动多个线程处理不同的任务
网络进程负责加载网络资源. 网络进程内部会启动多个线程来处理不同的网络任务
渲染进程渲染进程启动后, 会开启一个渲染主线程, 主线程负责执行 HTML, CSS, JS代码默认情况下, 浏览器会为每一个标签页开启一个新的渲染进程, 以保证不同的标签页之间不相互影响
渲染进程如何工作处理的任务:解析HTML解析CSS计算样式布局处理图层每秒把页面画60次执行全局JS代码执行事件处理函数执行计时器的回调函数
渲染进程调度任务的方法 : 排队
![[599895fb1203c3269c90656ae7d82784_MD5.jpg]]
事件循环
1.在最开始的时候，渲染主线程会进入一个无限循环
2.每一次 ...
Lucky
未读一、 背景页面截图功能在前端开发中，特别是营销场景相关的需求中, 是比较常见的。比如截屏分享，相对于普通的链接分享，截屏分享具有更丰富的展示、更多的信息承载等优势。最近在需求开发中遇到了相关的功能，所以调研了相关的实现和原理。
二、相关技术前端要实现页面截图的功能，现在比较常见的方式是使用开源的截图npm库，一般使用比较多的npm库有以下两个：
dom-to-image: github.com/tsayen/dom-…
html2canvas: github.com/niklasvh/ht…
以上两种常见的npm库，对应着两种常见的实现原理。实现前端截图，一般是使用图形API重新绘制页面生成图片，基本就是SVG（dom-to-image）和Canvas（html2canvas）两种实现方案，两种方案目标相同，即把DOM转为图片，下面我们来分别看看这两类方案。
三、 dom-to-imagedom-to-image库主要使用的是SVG实现方式，简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。
（一）使用方式首先，我们先来简单了解一下 ...
简介传送门
SVG 是 Scalable Vector Graphics 的缩写，意为可缩放矢量图形。于 2003年1月14日 SVG 1.1 被Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达共同确立成为W3C推荐标准。
概念那么SVG究竟是什么呢？
SVG是 Scalable Vector Graphics 的缩写 意为可缩放矢量图形
SVG是一个基于文本的开放网络标准，用来定义用于网络的矢量图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失，因此能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接
SVG 使用 XML 格式定义图形
SVG是万维网联盟的标准与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
优势相对于其他格式的图像，SVG的优势有很多：
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG图像中的文本是可选的，同时也是可搜索的，且可以与 JavaScript 技术一起运行
SVG可在图像质量不下降的情况下被放大和缩小
SVG ...
min截图, 利用canva在浏览器内部实现的截图
获取图片并上传思路:初始化: 监听input获取图片的点击事件 -> 初始化挂载监听事件操作 从文件夹获取本地图片 -> 触发监听事件 -> 获取本地上床文件的 File/Blob 对象(FIleReader) -> 通过readAsDataURL 读取成 base64 -> 在图片加载的时候进行复制操作 -> 画图
代码
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" con ...
渲染引擎原因
管理图元：使用渲染引擎能够更轻松的绘制并管理图形元素。
提供完善的动画与事件机制：原生语法绘制动画相对比较麻烦。
性能优化：渲染引擎基于底层渲染器的特性进行了大量优化工作，如脏矩阵渲染、分层渲染等，能够取得更好的渲染性能。使得开发者能够专注于视图的构建。
多个渲染器之间任意切换：如果有同时在这两种渲染器中进行绘制的需求，需要针对不同的渲染器进行单独开发，提高工作量的同时也难以保证其一致性。使用渲染引擎绘制时只需要指定所需的渲染器即可完成切换。
功能设计绘制基本图形 : 支持 rect、circle、line、path、text、ring 这几种基本图形的绘制。
进行坐标系变换: 支持 translate，scale，rotate 这三种变换，同时可以使用类似 Canvas2D 的 save 和 restore 去管理坐标系变换的状态。
测试相关本项目采用vitest单元测试, 具体操作可参考官网快速起步 | 指南 | Vitest
同时我们在写代码的过程中不会完全遵循 airbnb-base 的规范，所以需要修改 .eslintrc.js 如下，关闭一些规则的校验。
1 ...
min截图, 利用canva在浏览器内部实现的截图
获取图片并上传思路:初始化: 监听input获取图片的点击事件 -> 初始化挂载监听事件操作 从文件夹获取本地图片 -> 触发监听事件 -> 获取本地上床文件的 File/Blob 对象(FIleReader) -> 通过readAsDataURL 读取成 base64 -> 在图片加载的时候进行复制操作 -> 画图
代码
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" con ...
ProvidersProviders 是 Nest 的一个基本概念。许多基本的 Nest 类可能被视为 provider - service, repository, factory, helper 等等。 他们都可以通过 constructor 注入依赖关系。 这意味着对象可以彼此创建各种关系，并且“连接”对象实例的功能在很大程度上可以委托给 Nest运行时系统。 Provider 只是一个用 @Injectable() 装饰器注释的类。
1.基本用法module 引入 service 在 providers 注入
![[83a5e31c147e948fb66375779a62a2d2_MD5.png]]
在Controller 就可以使用注入好的service 了
![[e52244a25ef5b4ce4bbc5a139984879b_MD5.png]]
2.service 第二种用法(自定义名称)第一种用法就是一个语法糖
其实他的全称是这样的
123456789101112import { Module } from '@nestjs/com ...
关于 Next 中间件Nest 中间件中间件是处于请求和响应周期中间的函数，类似 express 中间件，可以访问请求对象（req）、响应对象（res）、和应用程序的下一个中间件函数。中间件的主要任务是可以执行以下操作：
执行任何代码。
修改请求和响应对象。
结束请求-响应周期。
调用堆栈中的下一个中间件函数。
如果当前中间件没有结束请求-响应周期，它必须调用 next() 方法将控制权传递给下一个中间件，否则请求将被挂起。
Nest 中间件应用场景：
请求日志记录：记录每个进入应用的请求的详细信息，如请求路径、方法、来源IP等，便于调试和监控。
身份验证和授权：在请求继续处理之前验证用户的身份，检查用户是否有权限访问特定的路由或资源。
请求数据处理：对请求中的数据进行预处理，如解析、格式化、校验等。
设置响应头：为即将发送的响应设置一些通用的HTTP头，如跨域资源共享（CORS）头、安全相关的头等。
性能监控：监控请求处理的时间，以便分析和优化性能。
缓存：实现缓存逻辑，减少对后端服务或数据库的请求，提高应用性能。
限流：控制请求的频率，防止服务被过度使用或遭受拒绝服务攻击（D ...
什么是NestNest （NestJS） 是一个用于构建高效、可扩展 Node.js 服务器端应用程序的框架。它使用渐进式 JavaScript，使用 TypeScript 构建并完全支持（但仍允许开发人员使用纯 JavaScript 进行编码），并结合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数式响应式编程）的元素。
Nestjs框架基于Express和Fastify(速度最快的web框架之一)
开始启动
1pnpm start
开发的时候需要监视文件的变化，自动重新编译和重新加载服务器
1pnpm start:dev
文件介绍12345678910- node_modules — 放置项目的依赖文件- src — 放置开发的代码文件 - app.controller.spec.ts — 测试 app.controller.ts 文件的单元测试文件 - app.controller.ts — 根控制器文件，处理路由的请求和定义路由处理器 - app.module.ts — 根模块文件，Nest 应用的主要入口 - app.service.t ...
