CODEWITHSUNDEEP
reactjsfilter
MomasVII
MomasVII

Reputation: 5081

Filter an Image on upload in react

I am looking to upload an image to my React site, where on upload I can add some filters like grayscale, saturation etc. I can't find anything except https://cloudinary.com/ which won't work due to the privacy involved in the images being uploaded.

Would love some suggestions as to what technologies I could utilise to achieve this.

Thanks

Upvotes: 0

Views: 910

Answers (2)

MomasVII
MomasVII

Reputation: 5081

I ended up using jimp

With this code....

 imageEdit = await Jimp.read(tmpFilePath)
    .then((image) => {
      return image
        .quality(100) //max quality is important for OCR
        .resize(2000, 1272)
        .crop(40, 220, 1100, 450) //mask out everything on the card that isn't the text we want
        .blur(3) //blur to help obscure security pattern
        .contrast(1)
        .brightness(0.8)
        .greyscale()
      //.write('public/images/OCRDebugLicence.jpg') //uncomment to save viewable debug image
    })
    .catch((err) => {
      return false
    })

Upvotes: 1

Denis Sicun
Denis Sicun

Reputation: 54

One way you can do this in by adding the image to a canvas and apply filters to it. MDN have a great example here - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

After you apply the effects you can get the new image by using toDataURL (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) and uploading this result.

There are multiple ways to get the image from a canvas, but that's a good direction to start.

Upvotes: 1

Related Questions