Jinie
Simple Image Editing & Compression Tool
npm i jinie
  • Simple implementation
  • Responsive with light/dark theme
  • In-built image compression
Docs  âžž
Try
Initialize
import Jinie from 'jinie' import 'jinie/dist/styles.css' function App() { return (<div> {/* Initialize Jinie */} <Jinie /> .. <BrowserRouter> <Routes> <Route .. /> .. </Routes> </BrowserRouter> </div>) } createRoot(document.getElementById('root') as HTMLElement).render(<App />)
Examples
Simple image editor
<button onClick={() => Jinie.init({ accept: 'image/jpeg', onResult: ({ code, img }) => { console.log(code, img) if (img) setImgURL(window.URL.createObjectURL(img)) } }) } > Upload Image </button>
Upload with compression
<button onClick={() => Jinie.init({ accept: 'image/jpeg', onResult: ({ img }) => { if (img) setImgURL(window.URL.createObjectURL(img)) }, maxSize: 2 * 1024 }) } > Upload Image </button>
Upload square png image with transparent background
<button onClick={() => Jinie.init({ accept: 'image/jpeg', onResult: ({ img }) => { if (img) setImgURL(window.URL.createObjectURL(img)) }, aspectRatio: 1, icon: true }) } > Upload Image </button>
Upload png image with red background
<button onClick={() => Jinie.init({ accept: 'image/jpeg', onResult: ({ img }) => { if (img) setImgURL(window.URL.createObjectURL(img)) }, aspectRatio: 1, icon: true, fill: '#ff0000' }) } > Upload Image </button>
Min width & height to be 512px
<button onClick={() => Jinie.init({ accept: 'image/jpeg', onResult: ({ img }) => { if (img) setImgURL(window.URL.createObjectURL(img)) }, minWidth: 512, minHeight: 512 }) } > Upload Image </button>
Light/Dark Theme
Light
Dark

// Light theme <Jinie theme='light' /> // Dark theme <Jinie theme='dark' />
Developed byneilveil