imoji-editor
v0.3.1
JavaScript image editor with sticker feature
0/weekUpdated 2 years agoMITUnpacked: 329.4 KB
Published by medistream.team
npm install imoji-editor
✨ imoji Editor
The image editor with a feature that you can add stickers to images!
Documentation
Table of contents
- Installation
- Usage
- Options
- Example
- Features
- Contributors
- Bug Report
Installation
``jsx`
npm install imoji-editor
Usage
`jsx
import ImojiEditor from 'imoji-editor';
Vue.use(ImojiEditor);
`
Options
$3
`jsx`
:sticker-images="stickerImages"
:width="600"
:height="480"
@done="image => {
// Do what you want
}"
:photo-selection-disabled="true"
/>
$3
Use this prop to put image from outside of editor. Vue watch will detect it.
- Default : undefined
- Type : Image Object (new Image())
$3
Use this prop to use sticker images what you want.
⚠ In version 1.0, we are supporting only 1 set. So, if you pass this prop, default (Medigi Set) will disappear.
- Recommend : SVG files, because png/jpg will show law quality when user import big size photo.
- Default : Medigi character set
- Type : Array, svg, jpg, png
> ### ⚠ Checkout Medigi character License
>
> Although Imoji is open source, the Medigi character's copyright is subject to the following:
>
> 
>
> ©Medistream 2021. All right reserved.
$3
Set size of the photo editor. You should set this option when using in modal. Checkout more information about using in modal here.
Imoji’s size is always same as the photo editor canvas’s size. Also, the sticker canvas’s size will automatically fit with photo editor.
- Default : document clientHeight
- Type : number
$3
You can customize outcome when you click the button however you want. This custom event will return result HTMLCanvasElement and MIME type as argument of the event.
- Recommend : Please destroy editor after user click done button.
- Default : download result edited image
- Type : event
- Argument : result HTMLCanvasElement, MIME type ( ex) , "image/png" )
> 🔻 Below are added in version 0.1.6
$3
Use this prop to prevent user change/select photo in editor.
- Default : false
- Type : Boolean
$3
You can handle error when you use done event.
- Default : null
- Type : event
- Argument : error about get result image
$3
Use this prop to change the warning message that the stickers will be reset when the Edit button is clicked.
- Default : All stickers are deleted when you edit the photo
- Type : string
$3
Use this prop to change 'Photo' mode's text what you want.
- Default : 'Photo'
- Type : String
$3
Use this prop to change 'Emoji Sticker' mode's text what you want.
- Default : 'Emoji Sticker'
- Type : String
$3
Use this prop to change download icon to text what you want.
- Default : null
- Type : String
Example
$3
- Recommend : In Mobile
`jsx`
$3
- Recommend : In Desktop
Please set width, height that fit with Modal's like this.
`jsx`
⚠ You should check Cropper JS's documentation first 🔻
> If you are using in a modal, you should initialize the editor after the modal is shown completely. Otherwise, you will not get the correct crop.
Features
$3
If you want to change the target image to another image, just click image icon button and select new image.
$3
User can set crop area by drag or touch(mobile).
When user clicks crop button, Free Crop will set automatically. If you click crop button again, crop area will be cleared.
Please click ✅ button to complete the crop. Also, if you switch to sticker mode while the crop area is active, crop will be done automatically.
`jsx`
// ImojiEditor.js
this.photoCanvas.setFreeCrop();
$3
- default : 16:9, 4:3, 2:3, 1:1
`jsx`
// ImojiEditor.js
this.photoCanvas.setCropRatio(x, y);
this.photoCanvas.setCropRatio(16, 9); // set crop ratio to 16:9
$3
- default : Y flip, X flip
`jsx`
// ImojiEditor.js
this.photoCanvas.flip(direction);
this.photoCanvas.flip('X'); // flip x-axis
$3
- default : +90 degree, -90 degree
`jsx`
// ImojiEditor.js
this.photoCanvas.rotate(sign);
this.photoCanvas.rotate('+'); // rotate 90 degree
$3
- default : + 0.1 , - 0.1
When user clicks sticker mode, zoom will be initialized. If you want to save zoom state, you should finish crop before switching to sticker mode.
`jsx`
// ImojiEditor.js
this.photoCanvas.zoom(ratio);
this.photoCanvas.zoom(-0.1); // zoom out 10%
$3
User can move image to crop more easily by drag or touch (mobile) ONLY when move button is clicked. Move icon button is ONLY supported during crop mode.
`jsx`
// ImojiEditor.js
this.photoCanvas.setDragMode('move');
$3
User can reset photo to init state by click reset icon button.
- default : reset to initial photo state.
`jsx`
// ImojiEditor.js
this.photoCanvas.reset();
$3
User can add sticker by clicking each sticker. We support rotate, flip, and resizing of sticker by drag or touch.
- Recommend : SVG files
- Default : medigi character set
`jsx`
// ImojiEditor.js
this.stickerCanvas.addSticker(src, [options]);
$3
User can delete sticker by clicking trash can icon button. It will delete activate(=clicked by user) sticker one by one.
`jsx`
// ImojiEditor.js
this.stickerCanvas.removeSticker(src, [options]);
$3
User can delete all stickers by clicking reset icon button, but photo edit will also reset.
`jsx`
// ImojiEditor.js
this.stickerCanvas.removeAllSticker(src, [options]);
$3
Click download icon button to export result image. Image size will be based on the natural size of the original image.
- Type : HTMLCanvasElement`
$3
- Support touch move only in crop mode.
- We didn't support touch zoom because of stability. Instead of it, you can use zoom buttons.
Contributors
- medistream
- emewjin
- junchi211
🙏🏻 Bug Report
👉🏻 Issues
: Please give us feedback on our github repository if there are any issues!