postMessage ArrayBuffer to native client module from JavaScript

Question

I would like to send HTML canvas's image to NaCl module on Google Chrome. On "dom side", I have following code:

var NaClModule = .... // NaCl module denoted by <embed> tag
var canvas = .... // canvas element
canvas.addEventListener('click', function() {
    var imageData = this.getContext('2d').getImageData(0, 0, this.width, this.height);
    NaClModule.postMessage(imageData.data);
});

imageData.data is of type Uint8ClampedArray on JavaScript console. So I supposed that NaCl module see passed data as pp::VarArrayBuffer

However, NaCl module actually take passed data as pp::VarDictionary with key = original array's index and value = original array's value (confirmed by pp::Var::DebugString).

Is this expected behavior? If not, what is worong with my code?

Or, is there any other way to pass image to NaCl module?

Answer 1

Passing a canvas to a NaCl module is done in the earth example to load a texture from a jpeg (see examples/demo/earth in the SDK).

Here is a snippet from that example:

var imageData = context.getImageData(0, 0, img.width, img.height);
// Send NaCl module the raw image data obtained from canvas.
common.naclModule.postMessage({'message' : 'texture',
                               'name' : name,
                               'width' : img.width,
                               'height' : img.height,
                               'data' : imageData.data.buffer});

So it looks like you just need to change your code to this:

NaClModule.postMessage(imageData.data.buffer);

And it should work.