1.0.15 • Published 6 months ago
simple-canvas-image-editor v1.0.15
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
- Exposure
- Brightness
- Hightlight
- Shadow
- White
- Black
- Temperature
- Tint
- Saturationrgb
- Contrast
- Clarity
- Sharpness