上传时模糊图像

Question

I'm developing a web application using Angular and Firebase. On the application, users can upload an image, and then other users can purchase that image. the problem is, I want to upload a blurred version of the image to Firebase storage so that I will have 2 versions of the image: the original image and the blurred image. once the user purchases the image he could download the original image.

I added a CSS property filter: blur(5px) brightness(0.5); but this is obviously bad practice since the users can either change the CSS property from the dev tools if they have some knowledge or just right click and save image as from the site and get the original one.

So my question is, what options do I have to blur the image? in my opinion I should blur the image on upload so that I will have 2 versions of the image saved on storage so that a user can see the blurred version of the image before he purchase it.

Answer 1

This has nothing to do with angular or firebase . What you need is a image processing node library .

I would suggest to use -

• JIMP https://github.com/oliver-moran/jimp
• lwip https://github.com/EyalAr/lwip
• Any other lib with good github stars

If you face any issue regarding their use, than share.