--- theme: channing-cyan highlight: monokai --- ## 前言最近写了一个[视频聊天室](https://juejin.cn/post/7289736431172452393)的项目，其中包括实时通讯的功能，能够发送文本消息、图片、视频等等所有文件，我希望在用户选择图片之后能够像其他聊天软件一样能够对图片做简单的处理，比如裁剪、涂鸦、马赛克等功能。虽说现如今每个人的设备都具备拥有这样能力的应用，但是当你使用一款应用时还要借助其他应用的功能略显有些麻烦，如果你是使用Snipaste这样的截屏工具，确实这款应用很方便，但是你如果是想裁剪一个图片使用的是截图的话则会降低图片分辨率，所以给项目新增此功能。 *

效果图放开头

* ![20231103_213951.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4b38f44810144439827d104dbb27763~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=514&h=522&s=540190&e=gif&f=93&b=181717)

## 需求概述此需求包含画笔、记号笔、折线、矩形、马赛克、裁剪、编辑历史记录(撤销和重做)、更改颜色和线宽功能，以及取消编辑和保存。 ## 实现此需求使用[Canvas API](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)实现，介绍下主要功能都需要使用哪些接口和方法；以下只分析编辑功能，即画笔、记号笔、折线、矩形、马赛克、裁剪功能的实现并给出代码案例。 ### CanvasRenderingContext2D > **`CanvasRenderingContext2D`** 接口是 Canvas API 的一部分，可为 [`