2.0.9 โ€ข Published 7 months ago

@image-kit/core v2.0.9

Weekly downloads
-
License
-
Repository
-
Last release
7 months ago

@image-kit/core ๐Ÿ–ผ๏ธ

A lightweight and performant image processing wrapper for the browser. Built using native browser APIs like Canvas, HTMLImageElement, and WebCodecs, this library provides a powerful yet minimal interface to perform real-time image transformations such as resizing, format conversion, quality tuning, and more.

โœจ Features

  • ๐Ÿชถ Minimal footprint
  • ๐Ÿ’จ Fast performance via native browser APIs
  • ๐Ÿงฉ Chainable API for better readability
  • ๐ŸŽจ Resize, format, sharpen, compress, and transform with ease
  • ๐Ÿงช Converts final result to Blob, Base64, or ImageBitmap

๐Ÿ“ฆ Installation

npm install @image-kit/core
# or
yarn add @image-kit/core
# or
pnpm add @image-kit/core

๐Ÿš€ Usage

import { image, thumbnail } from "@image-kit/core";

const src = "https://example.com/image.jpg";
const height = 200;
const aspectRatio = 16 / 9;

const transformedImage = image(`${src}?${Date.now()}`)
  .format("auto")
  .quality(1)
  .resize(thumbnail().height(height).aspectRatio(aspectRatio))
  .sharpen(1)
  .algorithm("multistep");

const blob = await transformedImage.toBlob();

๐Ÿ”ง API Reference

image(src: string)

Initializes image processing with the provided image source.

.format(format: 'auto' | 'jpeg' | 'webp' | 'png')

Automatically choose optimal format or specify it manually.

.quality(value: number)

Set the image quality (0-1).

.resize(config: ResizeConfig)

Resize the image using configuration (supports width, height, and aspectRatio).

.sharpen(value: number)

Sharpens the image. 1 is typically a safe default.

.algorithm(name: 'default' | 'multistep')

Chooses resizing algorithm.

.toBlob()

Returns a Blob of the transformed image.

.toBase64()

Returns a base64 data URL.

.toImageBitmap()

Returns an ImageBitmap.


๐Ÿงฑ Resize Utilities

thumbnail()

Returns a predefined ResizeConfig that simplifies resizing logic for thumbnails.

Example:

resize(thumbnail().height(300).aspectRatio(16 / 9))

๐Ÿงช Browser Support

FeatureSupported Browsers
Canvasโœ… Chrome, Firefox, Safari, Edge
WebCodecsโœ… Chrome, Edge (Partial in Safari)
ImageBitmapโœ… Most modern browsers

๐Ÿง  Philosophy

Less dependency, more browser power. Use what the platform gives you. This library is for those who want fast, predictable image processing without third-party bloat.


๐Ÿค Contributing

Pull requests and issues are welcome! Please open a discussion if you'd like to propose a significant feature or change.

git clone https://github.com/sundarshahi/image-kit-core.git
cd image-kit-core
npm install

๐Ÿ“œ License

MIT ยฉ Sundar Shahi Thakuri

2.0.9

7 months ago

2.0.8

7 months ago

2.0.7

7 months ago

2.0.6

7 months ago

2.0.5

7 months ago

2.0.4

7 months ago

2.0.3

7 months ago

1.0.3

7 months ago

1.0.1

7 months ago