mini-canvas-editor
Version:
Canvas editor component for JavaScript application. Easy to integrate and use.
72 lines (46 loc) • 2.52 kB
Markdown
# Mini Canvas Editor
[](https://actions-badge.atrox.dev/nocode-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://nocode-js.github.io/mini-canvas-editor/webpack-app/public/template-creator.html)
* [🎨 Inpainting Mask](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/inpainting-mask.html)
* [🔲 Crop](https://nocode-js.github.io/mini-canvas-editor/webpack-app/public/crop.html)
* [📦 Vanilla JavaScript](https://nocode-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
<head>
...
<link href="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.3.2/css/editor.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/mini-canvas-core@0.3.2/dist/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.3.2/dist/index.umd.js"></script>
```
Create the editor by:
```js
miniCanvasEditor.Editor.createBlank(placeholder, 200, 300, {});
```
## 💡 License
This project is released under the MIT license.