Canvas image edit

Installation

yarn add simple-canvas-image-editor

How to use in react

• you can use this with useEffect in react

 const [canvasImage, setCanvasImage] = useState<CanvasImageEdit | null>(null)
  useEffect(() => {
    const loader = new CanvasImageEdit("/wall.jpg")
    const canvas = document.getElementById("canvas") as HTMLCanvasElement

    loader.ImageLoader(canvas)
    loader.result?.brightness(10).render(canvas)

    setCanvasImage(loader)
  }, [])

• with canvas component

    <canvas id="canvas" style={{ width: "100%", height: "auto" }} />

• For full example see in folder example

Build

npm run build

Feature

• [x] Exposure
• [x] Brightness
• [x] Hightlight
• [x] Shadow
• [x] White
• [x] Black
• [x] Temperature
• [x] Tint
• [x] Saturationrgb
• [x] Contrast
• [x] Clarity
• [x] Sharpness