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