Neptunium, Promethium, Manganese

    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

    Install

    npm i react-image-curves-editor

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    82.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • ibrahim-rahhal