react-hover-image-filter

A simple canvas component that allows you to simulate paint effect with a mouse or finger simulating a paint brush applying a filter to the image on the coordinates of the mouse or finger position

Installation

npm install react-hover-image-filter

Usage

import React from 'react'
import { HoverImageFilter } from 'react-hover-image-filter'


const App = () => {
  return (

      <HoverImageFilter
        imageSrc="/beatles.jpg"
        fromFilter="blur(10px)"
        width=500
        height=500
        pixelPaintedSize: 46,
      />

  )
}

export default App

Visual Examples

From blur filter to no filter

From sepia filter to no filter

Warning

The prop "imageSrc" must be a local image. If you want to use an image from an url, you must download it and use it as a local image. This is because the canvas can't access to the image from an url for security reasons.

Props

Prop	Type	Required	Default	Description
imageSrc	string	true	-	The image to be filtered
paintEvent	"mousemove" | "holdclick"	false	"mousemove"	The event to be used to paint the image. It can be "mousemove" or "holdclick"
fromFilter	string	false	"grayscale(100%)"	The filter to be applied to the image
toFilter	string	false	"grayscale(0%)"	The filter to be applied to the image when the mouse is over the image
width	number	true	-	The width of the image
height	number	true	-	The height of the image
pixelPaintedSize	number	true	-	The size of the pixel painted on the image
canvasStyle	object	false	-	The style of the canvas
canvasClassName	string	false	-	The className of the canvas

License

MIT