Using Open CV JS to detect pixelated images

1

Hi,

I’m trying to build a browser based tool to detect if an image is pixelated.

I’ve found this on Stack Overflow - python - What is the best way to detect if an image is pixelated? - Stack Overflow

It’s in Python and I’m not sure how to convert it to JS. Can anyone help please?

All the best,
John

2

did you understand the algorithm behind it ?
also, what made you think, this is a good idea in the 1st place ?

(read the comments, about ref images and general suitability for this problem)

3

Hi Berak,

Thanks for your reply.

My understanding is the algo compares each pixel with it’s neighbour and if the result comes back with a mean difference of zero for the image this indicates the image may be pixelated.

My breakdown of the algo used here is (I’ll annotate with what I’ve tried in OpenCV JS)

img1 = cv2.imread('mandril3.jpg')
Read the image using openCV and store in var img1. (I’m not sure what OpenCV JS is doing here other than reading the image and storing the result in a Mat object. I’m not sure how to work with that object.

dec1A = img1[::2, ::2]
dec1B = img1[1::2, 1::2]

Create two vars and store every second bit of data from the image into an array. One of the vars stores every second bit but starts after the first bit. (I’ve tried to do this with JS using a modified version of Array.slice() that allows a skip factor but I’m not sure how to use it with the Mat object).

diff1 = cv2.absdiff(dec1A, dec1B)
Get the absdiff of the two two arrays from the previous step. I’m not sure how this works but I think it compares each value in each array and returns the diff between the two. So first compares dec1A[0] with dec1B[0] and returns the diff (positive int). It then iterates through the arrays. This should return another array with just the diff vals stored.

mean1 = np.mean(diff1)
Returns the Mean value of the diff array. If this is 0 then we can say the image may be pixelated.

For the ref image. I don’t see any comparison between img1 & img2 in the post so I’m not sure that is needed for this algo.

For suitability - I’m not overly concerned with accuracy or false positives - I’m building a tool to check if an image may be pixelated. The output to the user will be something like:

It looks like this image might be pixelated. Please check it before submitting as if the image is unsuitable this will cause delays in processing your request.

The tool won’t block the user from progressing if this detects a potentially pixelated image but it will flag it with them.

Thinking about it now - this may not be very useful for us as a lot of the images we receive will have only a few colours in them - logos, etc…

Is there a better option? The tool I’m building will detect image dimensions, type, svg embedded or data, blur (using openCV) and hopefully pixelation. The problem I am trying to solve with the pixelation detection is - customers sending us images that are the dimensions we request but have just been scaled up and have lost quality.

Thanks again,
John

1 Like
4

those approaches are substandard. they’ll respond to stuff that is “grainy” but not actually pixelated (grid like). grayscale morphology operations can cause such “grain” without being pixelated.

I’d do a sobel, then calculate row sum and column sum, then fourier those signals and look for a peak at around the “pixel size” you would consider pixelated.

1 Like
5

Sounds very good, thanks

6

you can use reduce

1 Like