🖼️ 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