Welcome folks today in this blog post we will be building a advanced toast ui tui image editor in vue.js 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 create a brand new react.js project and then install the below library using the npm command as shown below
npm i tui-image-editor
npm i @toast-ui/vue-image-editor
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
|
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 |
<template> <div class="imageEditorApp"> <tui-image-editor ref="tuiImageEditor" :include-ui="useDefaultUI" :options="options" @addText="onAddText" @objectMoved="onObjectMoved"> </tui-image-editor> </div> </template> <script> import {ImageEditor} from '@toast-ui/vue-image-editor'; export default { components: { 'tui-image-editor': ImageEditor }, data() { return { useDefaultUI: true, options: { includeUI: { loadImage: { path: 'sampleImage.png', name: 'SampleImage' }, initMenu: 'filter' }, cssMaxWidth: 700, cssMaxHeight: 500 } }; }, methods: { onAddText(pos) { }, onObjectMoved(props) { } } }; </script> <style scoped> .imageEditorApp { width: 1000px; height: 800px; } </style> |
Now if you execute the vue.js image editor app then the screenshot will look like this
🎨 Features
- Load image to canvas
- Undo/Redo (With shortcut)
- Crop
- Flip
- Rotation
- Free drawing
- Line drawing
- Shape
- Icon
- Text
- Mask Filter
- Image Filter
Live Demo
