Jinie - Simple Image Editing & Compression Tool

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

Compress to: 1000 KB

<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' />