不久前，我为一位客户解决了他们在生产中遇到的一个图片编辑问题。他们的用户拍完照片后需要给照片做一些标注，之后上传到系统中。为了简化这个流程，我直接为这个系统了开发了图片编辑的组件，并由客户集成到自己的系统当中去。这样他们也就可以直接编辑图片并直接上传了，省去了很多不必要的操作。这个组件现已正式为在为他们的用户提供服务了。
本项目主要的技术栈是TypeScript和FabricJS（6.4.3版本）。
这个Web图片编辑组件，我已经使用Github Pages提供了两个在线的示例，点击即可体验：
示例1：直接编辑图片
xingshen24.github.io/online-imag…
示例2：选择图片编辑
xingshen24.github.io/online-imag…
本项目的源代码已经托管到Github上了：
该组件已经具备了一个在线图片编辑器应当包含的基础功能。这些功能主要分为三大类。
第一大类功能是给图片添加一些批注。这类功能包含了六种基本的批注绘制操作。分别是矩形、圆形、箭头、画笔、文字、马赛克的绘制，除此之外，还有一个底图拖动功能。
第二大类功能是对图片本身的操作。包含了放大、缩小、延展和收缩空白区域、旋转、翻转、裁剪。
第三大类是与图片本身相关性并不大的功能，主要是一些编辑器所应当具备的功能。从操作者的视角来看，有操作的前进后退、编辑器的重置、本次图片编辑的确认与取消。从开发者的角度来看，则是图片编辑器与业务代码的集成和相关的API以及回调。
操作者视角的下主要关注的功能：前进、后退、重置。
开发者的视角下主要关注的功能：确认与取消。
上面所提到的三大类功能，为了让用户更方便的操作。前进、后退这两个最常用的功能也已经绑定到常用的快捷键"ctrl+z"、"ctrl+y"上了。
本组件是面向开发者创建的。因此，开发者可以使用简易的代码打开图片编辑器，并配置好确认和取消的回调函数。即可完成该项目的集成。如下面的代码所示：
ImageEditorHelper.createImageEditor(imageDisplay.src, '.', (base64Image) => {
imageDisplay.src = base64Image;
if (imageDisplay.classList.contains('hidden')) {
imageDisplay.classList.remove('hidden'); // 显示图片
}
});
上面的代码，使用createImageEditor创建一个图片编辑器。其中包含三个参数。参数imageDisplay.src是图片的地址，'.'则是图片编辑器要用到的一系列icon的相对路径，第三个函数是单次图片编辑确认后执行的回调。还有第四个参数，是单次图片编辑取消确认后的回调。因为无需做特殊处理，因此使用缺省值。
后续我还会详细的再写一系列的博客，向读者分享如何使用FabricJS一步一步来完成这样一个图片编辑器。其中包含了不少较为棘手的点，比如截图片的裁剪。为了克服这些问题，我也对FabricJS的源代码进行了一个深入的研究。
