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 ) { // if pixel is mostly opaque if(pixels[i+3] > 125){ ++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 getDominantColor(sourceImage){ var palette = []; // Create custom CanvasImage object var image = new CanvasImage(sourceImage), imageData = image.getImageData(), pixels = imageData.data, pixelCount = image.getPixelCount(); var pixelArray = []; for (var i = 0; i < pixelCount; i++) { // If pixel is mostly opaque if(pixels[i*4+3] >= 125){ pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]); } }; var cmap = MMCQ.quantize(pixelArray, 5); var newPalette = cmap.palette(); return {r: newPalette[0][0], g: newPalette[0][1], b: newPalette[0][2]}; } 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= 125){ pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]); } }; var cmap = MMCQ.quantize(pixelArray, colorCount); var newPalette = cmap.palette(); return newPalette; } /* for (var i = 0; i < pixelCount; i++) { pixels[i*4] = pixels[i*4]; // Red pixels[i*4+1] = pixels[i*4+1]; // Green pixels[i*4+2] = pixels[i*4+2]; // Blue }; image.clear(); imageData.data = pixels; image.update(imageData); */