1.0.15 • Published 3 years ago
mobile-image-editor v1.0.15
mobile-image-editor
This is an open source that allows you to edit images on your mobile.
installing
npm install mobile-image-editor
example
React
import React, { useEffect, useRef, useState } from 'react'
import ImageEditor from 'mobile-image-editor'
const ImageInput = () => {
const ref = useRef();
const [open, setOpen] = useState(false);
const [baseUrl, setBaseUrl] = useState();
useEffect(() => {
if (open) {
new ImageEditor(ref.current, {
baseImage: baseUrl,
images: [..."images"],
events: {
onFinish: async (blob) => {
// done button click Listener
const file = new File([blob], "file.jpg", { type: "image/jpeg" });
const url = URL.createObjectURL(file);
const a = document.createElement("a");
a.download = "file.jpg";
a.href = url;
a.click();
URL.revokeObjectURL(url);
setOpen(false)
},
onCancel: async (blob) => {
// back button click Listener
const file = new File([blob], "file.jpg", { type: "image/jpeg" });
const url = URL.createObjectURL(file);
const a = document.createElement("a");
a.download = "file.jpg";
a.href = url;
a.click();
URL.revokeObjectURL(url);
setOpen(false);
},
},
})
}
}, [open, baseUrl]);
return (
<>
<input type="file" onChange={(e) => {
const url = URL.createObjectURL(e.target.files[0]);
setBaseUrl(url)
setOpen(true)
}} />
{open && <div ref={ref}></div>}
</>
)
}
export default ImageInput;
Demo
https://scd7896.github.io/ImageEditor/examples/
author
- Developer: Kim Server (scd7896@gmail.com)
- Designer: MJ Jang (https://mjjang.myportfolio.com/work)