Extract color from image using JavaScript and Web Worker

2015-02-15T13:28:00Z

In the last week I was presented with the task to automatically extract a color from an image in a webpage and use this as the background color. A quick research resulted in the following steps:

Create a canvas element and draw the image on its 2d context.
Get the pixel data from the context using getImageData method.

Note: When you want to load images from another domain, you need to add the crossorigin attribute to the img tag (more information on the MDN).
Calulate the dominant pixel color.

Thankfully there is a nice JavaScript library out there, so we do not need to implement all logic by outself: Color Thief. The following example extracts the color from an image and applies as the background color:

<div>
	<img id="myImage" src="/images/example.png" />
</div>

<script>
	var myImage = document.getElementById("myImage");
	myImage.addEventListener("load", function () {
		var colorThief = new ColorThief(),
			color = colorThief.getColor(myImage);

		myImage.parentNode.style.backgroundColor =
			"rgb(" + color[0] + ", " + color[1] + ", " + color[2] + ")";
	});
</script>

This works well for a few small images. But when trying to do this for a couple of big images at once, it slows down the browser and results in hangs/lags on the website. Wo don't want that.

So I played a bit with web workers to get the heavy color calculation off the main thread. The only thing, that needs to be done on the main thread is creating the canvas and getting the pixel data from it. All the rest can be done separatly.

To explain the use of web workers a little bit, imaging the image from the example above. In the main JavaScript we have to follwing code in the image onload event:

// Setting up the web worker.
var worker = new Worker("worker.js");
worker.addEventListener("message", function (e) {
	var color = e.data;

	myImage.parentNode.style.backgroundColor =
		"rgb(" + color[0] + ", " + color[1] + ", " + color[2] + ")";
});

// Starting the web worker.
// (Imagine the function getImageDataUsingCanvas to create a
// canvas, drawing the image on its context and then returning
// the image data.)
var imageData = getImageDataUsingCanvas(myImage);
worker.postMessage(imageData);

Then in the worker.js file, we have the following code:

addEventListener("message", function (e) {
	var imageData = e.data;

	// The getColor function is a modified version of the
	// ColorThief.getColor function, which directly accepts
	// the pixel data as an argument.
	var color = getColor(imageData);

	postMessage(color);
});

I made up a full example with and without web workers, so you can see the impact it has on the overall performance:

https://embed.plnkr.co/s1KlIF/preview

Export a client certificate from Firefox on Android without root

2015-11-22T14:04:00Z

When I set up an SSL certificate for this website I created an account on startssl.com. I finished the account creation on my smartphone with Firefox. During this process a client certificate was added to my browser and startssl.com suggested to export it, so I can use it on other browsers and computers as well.

Now here comes the big question: how do you export a client certificate from Firefox on Android?

Turns out it's possible (even without rooting your phone). Here are the steps, I had to take. Note that I'm doing this in a Windows 10 PC, but it should work the same way on any other OS.

Install the Android SDK and USB drivers for your smartphone. You need to connect to it using ADB.
Activate developer options and USB debugging on your smartphone.
Connect your smartphone to your computer using USB cable and make a backup of your Firefox app using ADB:
```
adb backup org.mozilla.firefox
```
Download the Android Backup Extractor. It's a tool to convert ADB backup files to tar archives, which you can easily extract. Use it with your backup:
```
java -jar .\android-backup-extractor-20151102-bin\abe.jar unpack .\backup.ab .\backup.tar
```
Then extract the tar archive with any tool you want (e.g. 7-Zip).
Now browse the backup and Locate your Firefox profile. It should be in a folder similar to this:
```
apps\org.mozilla.firefox\f\mozilla\dx7e9l2j.default
```
You should be able to find the files cert9.db and key4.db in it. These files contain the client certificate. In order to extract it you need to the pk12util from Mozilla's NSS tools.
Download and build the NSS tools. The required process is described on the Mozilla wiki in detail: NSS sources building testing. In short these are the steps, I followed:
1. Clone the repositories:
```
mkdir nss-with-nspr
cd nss-with-nspr
hg clone https://hg.mozilla.org/projects/nspr
hg clone https://hg.mozilla.org/projects/nss
```
2. Install MozillaBuildSetup-Latest.exe
3. Open start-shell-msvc2013.bat from mozilla build tools, navigate to the created nss-with-nspr\nss and folder and execute the command:
```
make nss_build_all
```
4. Find pk12util.exe and certutil.exe in a folder similar to nss-with-nspr\dist\WIN954.0_DBG.OBJ\bin.
This step is probably not necessary, when you correctly include the generated libraries in the path, but I was only able to execute pk12util, when my working directory was nss-with-nspr\dist\WIN954.0_DBG.OBJ\lib.

Because of this I copied the files cert9.db and key4.db from my extracted Firefox profile to this lib folder.
Then you can extract the certificate with the following commands:
```
..\bin\certutil.exe -K -d sql:.
```
This will show all available certificates. Copy the certificate name from the last column and execute (enter any password you like, when asked):
```
..\bin\pk12util.exe -o cert.p12 -n "YOUR CERTIFICATE NAME" -d sql:.
```
Congratulations. You should now have a file cert.p12 in your current working directory, which you can import in your Firefox on Desktop.

Jan Kühle - Blog

Extract color from image using JavaScript and Web Worker

Export a client certificate from Firefox on Android without root