New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

jinie

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

jinie

Simple Image Editing & Compression Tool.

4.0.0
latest
Source
npm

Version published: last year

Weekly downloads: 14; decreased by-73.58%

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

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

Keywords

FAQs

What is jinie?

Is jinie popular?

Is jinie well maintained?

Package last updated on 02 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install