Process an image with javascript and output image and data
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We need to process an image to simplify it in to blocks of color. For this bounty we want to be able to load your page in jsfiddle or codepen and upload an image , provide some parameters in a simple ui and have it output the manipulated image and the data array that we need.

here is the flow of what we are looking for - lets start with this sample image

https://crts-assets.s3.amazonaws.com/bounty/wintertimehappiness_small.jpg

now we want to specify how many blocks we want to break this image in to. lets say something like 25 - here is a zip of the image in 25 parts (5x5)
https://crts-assets.s3.amazonaws.com/bounty/image-25parts.zip

now we need to process the individual image parts to summarize their colors to their blended simplest form, I think the proper term here is quantization - i found this as an example online

https://matkl.github.io/average-color/

if you use this specific image from the zip row-5-col-4.png you end up with this output -

https://www.dropbox.com/s/m46e7uoay140eb7/2019-11-07_02-50-28.png?dl=0

another demo

http://leeoniya.github.io/RgbQuant.js/demo/

so the output from the page should be a couple things

1- would be cool if we could render all of the tiles to the page in their chunked form so we can right click on a chunk and have just that chunk

2- all of the tiles of the summarized colors, i dont see a reason not to do with this with code using the rgb values

3- would be cool if we could get a json representation of the process which has the chunk location and the rgb value. like the zip i think we can use coordinates like (row,column) so the above example image would be (5,4) and the rgb color. not sure exactly how to structure that but I trust you can make it nice and organized.

here is a helpful writeup on how pinterest goes about something similar in terms of getting avg or dominant color
https://manu.ninja/dominant-colors-for-lazy-loading-images I don't know if this is the most sound algo to use here but I wanted to make sure to give context to what sort of color averaging we are trying to do. Also found this lib which i think might be useful by just setting the color count to 1 https://github.com/leeoniya/RgbQuant.js/

awarded to kerncy
Tags
javascript

Crowdsource coding tasks.

2 Solutions

Winning solution

Hi

please test my solution :
https://jsfiddle.net/jo1u5r6p/2/

It uses a little bit of jquery, the rest is vanilla javascript using canvas.
This allows you to load an image, it will then be displayed in the page. Just below will be your processed image displayed and at the bottom of the page the corresponding json.

I was not sure of your point 1 :

1- would be cool if we could render all of the tiles to the page in their chunked form so we can right click on a chunk and have just that chunk

You want to download directly the separate pngs ?

Do not hesitate if you have questions.

Update 1 : clean code indentation and added comments

you nailed it man! great job.
Qdev 16 days ago

Here is my solution, extended from the sample you shared,

https://jsfiddle.net/5wsevby2/

View Timeline