function getAverageRGB(sourceImage) { // Config var sampleSize = 10; // Create custom CanvasImage object var image = new CanvasImage(sourceImage), imageData = image.getImageData(), pixels = imageData.data, pixelCount = image.getPixelCount(); // Reset vars var i = 0, count = 0, rgb = {r:0,g:0,b:0}; // Loop through every # pixels. (# is set in Config above via the blockSize var) // Add all the red values together, repeat for blue and green. // Last step, divide by the number of pixels checked to get average. while ( (i += sampleSize * 4) < pixelCount ) { ++count; rgb.r += pixels[i]; rgb.g += pixels[i+1]; rgb.b += pixels[i+2]; } rgb.r = Math.floor(rgb.r/count); rgb.g = Math.floor(rgb.g/count); rgb.b = Math.floor(rgb.b/count); return rgb; } function createAreaBasedPalette(sourceImage, colorCount){ var palette = []; // Create custom CanvasImage object var image = new CanvasImage(sourceImage), imageData = image.getImageData(), pixels = imageData.data, pixelCount = image.getPixelCount(); // How big a pixel area does each palette color get var rowCount = colCount = Math.round(Math.sqrt(colorCount)), colWidth = Math.round(image.width / colCount), rowHeight = Math.round(image.height / rowCount); var count = offset = rowOffset = vertOffset = horizOffset = 0, rgb = {r:0,g:0,b:0}; for(var i=0; i