Vue 3 Image Editor

Modern lightweight Vue 3 image editor component

Demo

https://alireza013013.github.io/example-vue-image-editor/

Features

- Component user interface customization
- Photo cropping
- Painting On Image
- No reduction in image quality
- Image compression to reduce size without losing quality
- Select desired width and height

Getting started

$3

The first step is to install using npm:

``bash
npm i vue3-image-editor
`

$3

#### Global Using
you should import ViewPlugin And css file in the main.ts and use ViewPlugin.

`ts
import ViewerPlugin from "vue3-image-editor"
import "vue3-image-editor/styles.css"

app.use(ViewerPlugin)
`

#### Local Using
You must import the component and css file in the desired file as follows.

`ts
import { ImageEditor } from "vue3-image-editor"
import "vue3-image-editor/styles.css"
`

$3

Simple usage is given in the following example.

`vue



`
To access component functions, a variable must be defined and connected to the component through ref. In the above example, imageEditor variable is used, whose initial value is null. You have to put your photo file in a selectedFileImageForEdit variable so that the photo will be displayed for you.
To change the blob to a file, you can do the following.

`ts
const finalFile: File = new File([blob], "nameFile", { type: "image/png" })
`

$3

To use the photo cropping function, you must call enableCroping. For this purpose, you can define a button as in the example above and call enableCroping on the @click function button.
After calling enableCroping, the photo cropping square will appear. Now, to save the changes, you can call the saveChanges and to cancel the changes, you can call the cancelChanges.
You can change the square appearance of the photo by using background-crop-div-color and border-crop-div-color.

#### Notice
When the function of cutting and drawing is not yet activated, it is better not to show the buttons related to saveChanges and cancelChanges functions to the user so that the user cannot call them, because there is no need for this.
When one of the functions is active, it is better not to show the other.

$3

To use the feature of drawing on the image, you must call enablePainting. For this purpose, you can define a button as in the example above and call enablePainting on the @click function button.
Now, to save the changes, you can call the saveChanges and to cancel the changes, you can call the cancelChanges.
The default color of the pen is black. To change it, you can change color-brush variable. You can also put a input color like the example above so that the user can choose the color himself.

$3

You can specify the maximum width and maximum height of the photo. In the absence of these values, the photo will be loaded in its actual size. The recommended amount for these two is between 400 and 500.

$3

After finishing the changes on the image, to access the final file, you must call finishEditing. Then you have to rewrite the finishEditImage` function because this function returns the final file to us. These things can be seen in the above example.