Demo of Color Palettes and PhoneGap

This post is more than 2 years old.

Earlier today I discovered the excellent Color Thief JavaScript library by Lokesh Dhakr. Color Thief gives you the ability to find the dominant color of a picture, or a palette of major colors. Check the site for examples. I thought it would be interesting to wrap this into a PhoneGap project and create palettes based on your camera. Here's what I came up with.

First off, if you've never looked at PhoneGap's Camera API, it's worth taking a quick peak at their documentation. The basics you should be aware of is that PhoneGap can work with either new pictures taken with the camera or existing ones saved to the device. You can control height, width, quality, and how the data is handed over to you.

I began by working with two buttons - one to let you take a new picture and one to let you select an existing one.


<input type="button" id="takePictureBtn" value="Take Picture">
<input type="button" id="picPictureBtn" value="Select Picture">

These buttons then were hooked up with event listeners:


$("#takePictureBtn").click(takePic);
$("#picPictureBtn").click(selectPic);


function takePic(e){
	navigator.camera.getPicture(picSuccess, picFail, {quality:75, targetWidth:desiredWidth, targetHeight:desiredWidth, sourceType:Camera.PictureSourceType.CAMERA, destinationType:Camera.DestinationType.FILE_URI});
	}

function selectPic(e) {
	navigator.camera.getPicture(picSuccess, picFail, {quality:75, targetWidth:desiredWidth, targetHeight:desiredWidth, sourceType:Camera.PictureSourceType.PHOTOLIBRARY, destinationType:Camera.DestinationType.FILE_URI});
	}

In both cases, the picture's file URI is sent to a success handler. I simply then assign that to an empty image:


function picSuccess(imageURI) {
	$("#yourimage").attr("src",imageURI);
}

Now for the fun part. The Color Thief API is rather simple, but when I switched from a static image to a dynamic one, I noticed I ran into errors. Turns out - I was trying to run the code before the image was fully loaded. I therefore added a new event listener:


$("#yourimage").load(getSwatches);

The getSwatches function then will handle getting the color palette and assigning them to a set of swatches below the image:


function getSwatches(){
	var colorArr = createPalette($("#yourimage"), 5);
	for (var i = 0; i < Math.min(5, colorArr.length); i++) {
		$("#swatch"+i).css("background-color","rgb("+colorArr[i][0]+","+colorArr[i][1]+","+colorArr[i][2]+")");
	}
}	

And the results? Here are some samples:

I've included a zip of the project below. You will find the code in the assets folder and an APK in the bin folder.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Simon MacDonald posted on 1/14/2012 at 12:59 AM

Wow, this is the second time today I've heard of this Color Thief library. I wish it had been around back when I was doing another project as it would have come in real handy. Glad to see you are digging into the PhoneGap API.

Comment 2 by Mikel posted on 1/17/2012 at 6:40 PM

Wow, that is really cool! Thanks for sharing!

Comment 3 by Keiller posted on 2/16/2012 at 2:45 AM

Cool!! Thanks

Comment 4 by Shaashimov posted on 2/25/2013 at 3:17 PM

Hello.
I'm trying to pick the color value to do my stuff :
if ((("#swatch"+i).css("background-color")== "#000000") || (("#swatch"+i).css("background-color")== "#ffffff")) {
$.mobile.changePage("index.html");
}

but it returns me this :
Uncaught TypeError: Object #swatch0 has no method 'css'.

Do you have any solution for me ?

Comment 5 by Raymond Camden posted on 2/25/2013 at 5:07 PM

You aren't using jQuery right. You prepend those selectors with a $ character.

Comment 6 by Shaashimov posted on 2/25/2013 at 5:41 PM

I 've fixed like this :
if ((("background-color","rgb("+colorArr[i][0]+","+colorArr[i][1]+","+colorArr[i][2]+")")== "rgb(4,4,4)") || (("background-color","rgb("+colorArr[i][0]+","+colorArr[i][1]+","+colorArr[i][2]+")")== "rgb(8,4,4)")) {
$('.corpus').load('index.html', {transition : "slide"});
}
else {}

It worked.

Comment 7 by Raymond Camden posted on 2/25/2013 at 5:53 PM

Not sure how that works as ("background-color") by itself is meaningless. It is NOT a jQuery selector.

Comment 8 by Shaashimov posted on 2/25/2013 at 8:11 PM

You're right. No need this ("background-color").
I've deleted this entry and it works as well.
Thanks

Comment 9 by Jitendra Jain posted on 6/11/2014 at 12:57 PM

I have downloaded the entire zip file and the camera functionality is not called. Am i missing something?

Comment 10 by Raymond Camden posted on 6/11/2014 at 6:19 PM

When you open up console, what do you see?

Comment 11 by Aditya posted on 11/17/2014 at 10:00 AM

Hi Raymond,

I'm facing the same issue. The camera is not getting called and it gives error back in the console saying "TypeError: Cannot call method 'getPicture' of undefined".

Thanks,
Adi

Comment 12 by Raymond Camden posted on 11/17/2014 at 4:19 PM

It sounds like you didn't add the Camera plugin.

Comment 13 by Richie YaƱez posted on 9/11/2017 at 7:31 PM

Hi raymond

you will have a project that you can send me and thanks for your tutorials I have a year following you

Comment 14 (In reply to #13) by Raymond Camden posted on 9/11/2017 at 8:07 PM

I fixed the download link.