react-image-curves-editor
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

react-image-curves-editor

React components to manipulate images curves like within photoshop

NPM JavaScript Style Guide

Install

npm install --save react-image-curves-editor

Example

https://ibrahimrahhal.github.io/react-image-curves-editor/

Usage

import { useEffect } from 'react'
import { ImageCurvesEditor, ImageLevelsHistogram } from 'react-image-curves-editor'
import 'react-image-curves-editor/dist/index.css'

const Example = () => {
    const canvasRef = React.useRef<HTMLCanvasElement>(null);
    const [loaded, setLoaded] = React.useState(false);
    useEffect(() => {
        if (!canvasRef.current) return;
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');
        if (!ctx) return;
        const img = new Image();
        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            setLoaded(true);
        };
        img.src = '/house.jpg';
    }, [])
  return (
    <div>
      <canvas ref={canvasRef}></canvas>
      {loaded && <ImageLevelsHistogram targetRef={canvasRef.current} />}
      {loaded && <ImageCurvesEditor targetCanvas={canvasRef.current} />}
    </div>
  )
}

License

MIT © ibrahimrahhal

Package Sidebar

Install

npm i react-image-curves-editor

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

82.5 kB

Total Files

14

Last publish

Collaborators

  • ibrahim-rahhal