Package Exports

image-arts
image-arts/dist/index.js
image-arts/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (image-arts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🖼️ image-arts

A lightweight React component for in-browser image editing. Easily apply adjustments, resize, and change aspect ratios with an intuitive API.

✨ Features

📐 Resize images with customizable scale
🎨 Adjustments for:
- Brightness
- Contrast
- Highlights
- Shadows
- Saturation
- Warmth
- Sharpen
🔲 Change aspect ratio on the fly

📦 Installation

npm install image-arts

🚀 Usage

import React, { useState } from "react";
import CanvasEditor from "image-arts";

const CanvasEditors = () => {
  const [imageUrl, setImageUrl] = useState(
    `https://res.cloudinary.com/donklmnnv/image/upload/v1745833900/lineup_dezdfh.jpg`
  );
  const [currentDimensions, setCurrentDimensions] = useState({
    width: 400,
    height: 500,
  });
  const [resize, setResize] = useState(100);
  const [adjustments, setAdjustments] = useState({
    brightness: 0,
    contrast: 0,
    highlight: 0,
    shadow: 0,
    saturation: 0,
    warmth: 0,
    sharpen: 0,
  });
  const [ratio, setRatio] = useState(undefined);

  return (
    <CanvasEditor
      imageUrl={imageUrl}
      dimensions={currentDimensions}
      adjustments={adjustments}
      resize={resize}
      ratio={ratio}
    />
  );
};

export default ImageEditor;

🧩 Props

Prop	Type	Description
`imageUrl`	`string`	Source URL of the image
`dimensions`	`object`	Width and height of the canvas `{width, height}`
`adjustments`	`object`	Object containing adjustment values
`resize`	`number`	Resize percentage (e.g., 100 for original)
`ratio`	`string`	Optional aspect ratio (e.g., `'16:9'`)

📘 License

MIT