Skip to content

Latest commit

 

History

History
141 lines (107 loc) · 4.61 KB

readme.md

File metadata and controls

141 lines (107 loc) · 4.61 KB
Raw

Jinie

✨ Simple Image Editing & Compression Tool ✨

Easily enhance and optimize images before upload with Jinie. Crop, pan, scale, and rotate with a built-in compression feature to compress images to the target size. 🚀

Installation 🚀

To install the Jinie package, you can use npm:

npm install jinie

Usage 🛠️

Jinie need to be initialized only once at the top.

ReactJS example

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

Here's a basic example of how to use Jinie to edit images:

import Jinie from 'jinie'

..

// Upload and crop image on init
<button
  onClick={() =>
    Jinie.init({
      accept: 'image/jpeg',
      onReady: result => {
        console.log(result) // Cropped image blob
      }
    })
  }
>
  Upload Image
</button>

// Or provide an image to crop in init
<input
  type='file'
  accept='image/jpeg'
  onChange={async (e) => {
    const img = e.target.files[0]
    Jinie.init({
      img,
      onResult: ({ code, img }) => {
        console.log(code, img)
        if (img) setImgURL(window.URL.createObjectURL(img))
      }
    })
  }}
/>
Argument Type Usage Default
onResult Function Result callback
img ?Blob Source image, if not provded, request image on init
accept ?String Allowed mime types, only works when img not provided image/jpeg,image/png
aspectRatio ?Number Crop box aspect ratio
icon ?Number Output png file false
fill ?Number Background color Transparent for icon & white for jpg
minWidth ?Number Min image width required else cancel
minHeight ?Number Min image height required else cancel
minSize ?Number Min image size required else cancel
maxSize ?Number Max output size

Result codes

Code Image Note
OK true Okay
MAX_COMPRESSION true Image max compressed, but still greater than max size argument
CANCELED false User clicked on cancel
MIN_WIDTH_FAIL false Image width is less than the min image argument
MIN_HEIGHT_FAIL false Image height is less than the min image argument
MIN_SIZE_FAIL false Image size is less than the min size argument
COMPRESSION_ERROR false Error occurred while compressing the image

Jinie.CompressionLoop exports the Compression Loop package which is used to compress the image to the target size. It can be used alone to compress images without opening the Jinie editor.

Dark theme setup

While initializing Jinie

<Jinie theme='dark' />

or automatic theme detection with body[data-theme]="dark"

<html>
  <head>
    ..
  </head>

  <body data-theme="dark">
    ..
  </body>
</html>

License 📜

This package is open-source and available under the MIT License.

Contributing 🙌

Contributions to the Jinie package are welcome! If you have any ideas, improvements, or bug fixes, please submit a pull request or open an issue.

Authors 🖋️

Developed & maintained by neilveil