0

I have a img that has several predefined color blocks. For example, a picture like this: https://cdn-images-1.medium.com/freeze/max/1000/1*MQCvfEbbA44fiZk5GoDvhA.png?q=20

Is there a way to only show the area with a particular color and leave other areas as transparent?

I don't have the path along the edge of each blocks. All I have is the image itself.

Jiajun
  • 125
  • 7

1 Answers1

1

Tracking.js seems to provide APIs for doing image recognition in the browser:

https://medium.com/swlh/detect-color-objects-with-tracking-js-623a15b14732

If you know the colors that you want to filter for, you could use a canvas and go through each of the pixels in the image (which is just an array of pixels), and then output a new image with colors that don't match manipulated however you see fit. In terms of how to do this, I think this question/answer should be sufficient:

Looping through pixels in an image

Tore
  • 1,236
  • 2
  • 11
  • 21