# mini-canvas-editor
**Repository Path**: odora/mini-canvas-editor
## Basic Information
- **Project Name**: mini-canvas-editor
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-01
- **Last Updated**: 2024-04-01
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Mini Canvas Editor
[](https://actions-badge.atrox.dev/img-js/mini-canvas-editor/goto?ref=main) [](/LICENSE) [](https://npmjs.org/package/mini-canvas-editor)
Canvas editor component for JavaScript application. Works with any front-end framework. Easy to integrate and use. Well-known graphical interface. Edit images, draw shapes, add texts and more. Gzipped size less than 100 KB. Uses Fabric.js internally.
Main use cases:
* resize image,
* crop image,
* create a template, render it on the front-end and the back-end (Node.js only),
* create inpainting mask.
Online Examples:
* [🎬 Template Creator](https://img-js.github.io/mini-canvas-editor/webpack-app/public/template-creator.html)
* [🎨 Inpainting Mask](https://img-js.github.io/mini-canvas-editor/webpack-app/public/inpainting-mask.html)
* [🔲 Crop](https://img-js.github.io/mini-canvas-editor/webpack-app/public/crop.html)
* [📦 Vanilla JavaScript](https://img-js.github.io/mini-canvas-editor/webpack-app/public/vanilla-javascript.html)
## 🚀 Installation
To use the editor you should add JS/TS files and CSS files to your project.
### NPM
Install this package by [NPM](https://www.npmjs.com/) command:
`npm i mini-canvas-editor`
To import the package:
```ts
import { Editor } from 'mini-canvas-editor';
```
If you use [css-loader](https://webpack.js.org/loaders/css-loader/) or similar, you can add CSS files to your bundle:
```ts
import 'mini-canvas-editor/css/editor.css';
```
To create the editor write the below code:
```ts
Editor.createBlank(placeholder, 200, 300, {});
```
### CDN
Add the below code to your head section in HTML document.
```html
...
```
Create the editor by:
```js
miniCanvasEditor.Editor.createBlank(placeholder, 200, 300, {});
```
## 💡 License
This project is released under the MIT license.