-
Notifications
You must be signed in to change notification settings - Fork 4
Home
OS Image Filter is a project intended to hide inappropriate content in images of web sites. Currently, it is being developed as extension for Google Chrome.
Once the extension has been installed in Google Chrome, it analyses the images of a web page to detect parts that have human skin colour. These areas of a picture are greyed out.
-
Black list: Filter the images of selected web sites only. Toggle the list into a white one to filter the pictures in every other web site.
-
Original image: See the unfiltered image by clicking in the eye icon in the top right corner of the picture.
-
Pause the extension: Pause the execution of the extension for a single tab or all of them.
Its workflow is quite straightforward, it relies in two main components: Load Event of image element, and Mutation Observer.
The load event is fired once the image has been completely loaded into the web page. This event is associated to a listener which is triggered accordingly. The mentioned listener has the logic related to filter the corresponding image.
The extension contains a flag that is used to start the entire process. This flag is set to true when the DOM content has been loaded, that means that the entire HTML document is loaded and parsed, and DOM manipulations can be done. This process does not care about the status of images, styles, subframes.
Once the DOM content is loaded, the extension looks for the image elements to add the corresponding listener mentioned above. Now, when an image is fully loaded and the listener is triggered, the following things occur:
- The source of the image changes to display a transparent image instead of the original one.
- A style is added to the image, so a coloured background is displayed.
Finally, the Mutation Observer is there to observe changes in the DOM structure of the web page and act accordingly. This allows to hide images that are loaded later, for instance in web pages that load their content when the user scrolls down.
The process to filter an image is done using a canvas element. Every time an image is detected, it's data is send to a canvas element. Then, every pixel within the image is compared to a predefined range of values (range that defines the human skin colour). If the values of the pixel lay within the range, then the pixel is greyed out, otherwise, its original values are preserved.
Once an image has been processed, it is encoded to base64 format, this value is then set in the corresponding attribute in the DOM element.
The algorithm that process the images only compares the colour of every pixel. Therefore, some parts of an image that do not correspond to human skin might be filtered too.
The algorithm works is colourful images, therefore, grey scale images that contain human skin will not be filtered.