Welcome folks today in this blog post we will be building a advanced toast ui tui image editor in javascript using fabric.js library in browser with advanced filters.All the full source code of the application is shown below.
Installation
In order to get started you need to make an example.html file and copy paste the following code to it
example.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>0. Design</title> <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet" /> <link type="text/css" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"" rel="stylesheet" /> <style> @import url(http://fonts.googleapis.com/css?family=Noto+Sans); html, body { height: 100%; margin: 0; } </style> </head> <body> <div id="tui-image-editor-container"></div> <script type="text/javascript" src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js" ></script> <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js" ></script> <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js" ></script> <script type="text/javascript" src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script> <script type="text/javascript" src="js/theme/white-theme.js"></script> <script type="text/javascript" src="js/theme/black-theme.js"></script> <script> // Image editor var imageEditor = new tui.ImageEditor('#tui-image-editor-container', { includeUI: { loadImage: { path: 'img/sampleImage2.png', name: 'SampleImage', }, theme: blackTheme, // or whiteTheme initMenu: 'filter', menuBarPosition: 'bottom', }, cssMaxWidth: 700, cssMaxHeight: 500, usageStatistics: false, }); window.onresize = function () { imageEditor.ui.resizeEditor(); }; </script> </body> </html> |
Here we are using fabric.js and jquery.js libraries alongside toast ui libraries for building out the image editor. For all the images and javascript files you can download the full github repository as shown below
After downloading it the directory structure will look something like this
Now if you open the index.html file inside the browser you will see the below screenshot of the image editor
🎨 Features
- Load image to canvas
- Undo/Redo (With shortcut)
- Crop
- Flip
- Rotation
- Free drawing
- Line drawing
- Shape
- Icon
- Text
- Mask Filter
- Image Filter
