A while ago, I helped a client solve a picture editing problem that their product was facing. After taking photos, their users needed to annotate them and then upload them to the system. In order to simplify this process, I developed a picture editing library for their system and completed the integration work with the client. In this way, they can directly edit pictures and upload them directly, saving their users a lot of unnecessary operations. This library is now officially providing services to their users.
The main technologies of this project are TypeScript and FabricJS (version 6.4.3).
To show you this web image editing library, I have provided two online examples using Github Pages. Click to experience:
Example 1: Edit An Image Directly
https://xingshen24.github.io/online-image-editor/index.html
Example 2: Select An Image To Edit
https://xingshen24.github.io/online-image-editor/example.html
The source code of this project has been hosted on Github:
https://github.com/xingshen24/online-image-editor
This library already has the basic functions that an online image editor should have. These functions are mainly divided into three categories.
The first category of functions is to add some annotations to the picture. This category of functions includes six basic annotation drawing operations, namely rectangle, circle, arrow, brush, text, mosaic drawing, in addition to this, there is also a base map dragging function.
The second category of functions is the operation of the image itself, including zooming in, zooming out, extending and shrinking blank areas, rotating, flipping, and cropping.
The third category mainly includes functions that editors should have, rather than the image itself. From the operator's perspective, there are forward and backward operations, editor reset, confirmation and cancellation of the current image edit. From the developer's perspective, it is the integration of the image editor with the business code and the related APIs and callbacks.
The main functions of concern from the operator's perspective are: forward, backward, and reset.
The main functions of concern from the developer's perspective are: confirmation and cancellation.
The three categories of functions mentioned above have been bound to the commonly used shortcut keys "ctrl+z" and "ctrl+y" to make it easier for users to operate.
This library is created for developers. Therefore, developers can use simple code to open an image editor and configure the confirmation and cancellation callback functions to complete the integration of the project. As shown in the following code:
ImageEditorHelper.createImageEditor(imageDisplay.src, '.', (base64Image) => {
imageDisplay.src = base64Image;
if (imageDisplay.classList.contains('hidden')) {
imageDisplay.classList.remove('hidden'); // 显示图片
}
});
The above code uses createImageEditor to create an image editor. It contains three parameters. The parameter 'imageDisplay.src' is the address of the image, '.' is the relative path of a series of icons to be used by the image editor, and the third parameter is the callback executed after a single image edit is confirmed. There is also a fourth parameter, which is the callback executed after a single image edit is canceled. Because no special processing is required, the default value is used.
I will write a series of blogs in detail later to share with readers how to use FabricJS step by step to develop such an image editor. It contains some tricky points, such as cropping screenshots. In order to overcome these problems, I also conducted an in-depth study of the source code of FabricJS.
Top comments (0)