Image processing script

We have a canvas, measuring 48x48 cells (2304 total) We want to take a facial image, and process it so that it can be rendered in the canvas The process would be: 1. Convert the image to grayscale 2. Pixelate (Mosaic) the image to cell size 6 square 3. Posterize the image to 4 levels (Black, Dark Grey, Light Grey, White) The output will be an image which can be displayed in the 48x48 cell canvas, with each cell being filled with one of the four colours. (Note: I would also be interested in hearing your thoughts about how we could potentially define the background to the image, so that part can be filled with a highlight colour, but it is not a key requirement of this project) In addition to the web script that would successfully achieve this, a required outcome of this project is to produce results from image tests, which give us percentages of the 2304 cells filled with each of the four colours. As an example, it could be 40% light grey, 30% dark grey, 20% black and 10% white. With this, it would be ideal to be able to add a rule to the web script which calibrates the Posterized version, substituting each of the four colours until such point that the percentage mix is attained, and the result still looks visually satisfactory 4 images are attached to this project: 1. Original image 2. Grayscale process 3. Pixelate (Mosaic) process to cell size 6 square 4. Posterize process to 4 levels (Black, Dark Grey, Light Grey, White) There is no image available for the process above, which describes the calibration process so that the final image is composed from the 40/30/20/10 mix (or whatever the numbers we determine through test)