How to write a new image format decoder in Chrome Browser

Question

Browsers have poor support of image formats. Actually only GIF, JPG, PNG and WebP are supported.

I would like to had a new one : JBIG2

From the end user point of view, he will only download and install a chrome extension and his browser will be able to decode the new image format.

From the web developer point of view, new format will be transparent and compatible with tag img, canvas and css. To display JBIG2 images, he still uses :

<img src=“path/to/myImage.jbig2”>

or

var myImage = new Image();
myImage.addEventListener( 'load', function() {
    // insert in canvas, when image is loaded
});
myImage.src = 'path/to/myImage.jbig2';

or

.my-class {
    background-image: url( “path/to/myImage.jbig2”);
}

The problem isn’t the decoder itself. I foresee to use this one JBig2dec written in C language.

The problem is how to implement a new image decoder? In Chrome, when we have to run C code the best solution is to use Native Client Extension.

And even better, I can read on this NaCl web page :

Graphics, audio, and much more: Run native code modules that render 2D and 3D graphics, play audio, respond to mouse and keyboard events, run on multiple threads, and access memory directly all without requiring the user to install a plugin.

Multimedia applications: Codecs for processing sounds, images, and movies can be added to the browser in a Native Client module.

But unfortunately there is no documentation neither sample to implement a 2D graphic decoder. I just guess that I need to register an hook for the minetype image/jbig2.

Does anyone know how to implement a new image format decoder with NaCl ?

Answer 1

Yes, I think the solution you've described will mostly work, though you may need to load the image using an <embed src="..." type="image/jbig2"> instead of <img>.

Basically, you will:

1. Compile the JBig2 decoder using the Native Client SDK
2. Add the PPAPI plugin entry point. See any of the examples in the NaCl SDK, or the tutorial here.
3. In your derived Instance class, implement the virtual function HandleDocumentLoad. This function will be called when your Native Client plugin is used as a mimetype loader. You can use the URLLoader object that is passed to read your JBig2 file.
4. Create a 2D graphics context, and display the contents of the decoded image in it. Take a look at the Graphics2D example in the NaCl SDK (examples/api/graphics2d).
5. Make a Chrome extension that registers itself as a JBig2 Native Client mimetype handler (as you've already found).