Load image using crossOrigin attr. in Firefox addon sdk

Question

In content script in Firefox addon SDK I'm loading image like this way:

var img = new Image();
img.crossOrigin = "Anonymous";
img.src = URL;
img.onload = function (data) {
    var canvas = document.createElement("canvas");
    canvas.width =this.width;
    canvas.height =this.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);
    var dataURL = canvas.toDataURL("image/jpeg");
    callback.call(this,dataURL);
}

The request has been done but the response header is empty body, I think the problem in cross origin because it loaded successfully from page allow cross origin.

How can I solve this inside content script? I need the image data to store it in local storage.

Regards, Mohammad.

Answer 1

First you should actually check if this is a cross-origin problem. The HTTP response might be blank due to referrer restrictions for example. Although the server should return some kind of error or redirect in that case.

Secondly, just setting the CORS flag on the image itself won't do anything if the server doesn't send the necessary headers.

If this is limited to a specific domain you can use cross-domain content scripts via page-mod or tab.attach by declaring the necessary permissions in the package.json. Then you can fetch the image files with a privileged XHR, turn the received data into a blob url and set that as image source.

If you need to access arbitrary domains then this can't be done with the addon-sdk since it only provides scripts with restricted privileges. There is a lower level API that is similar to sdk content scripts but runs with system privileges: frame scripts. Although you will have to import the XHR constructor into the frame script environment first before you can apply the same approach as above.

Answer 2

Finally the problem has been solved, thank you guys for a great discussion. How I solved it:

The problem was a cross origin problem as @the8472 mentioned, so what I did is making the request using SDK for the image and convert its data to base64 based on this answer.

The request usign SDK like this:

var Request = require("sdk/request").Request;
Request({
            url: imageURL,
            overrideMimeType:"text/plain; charset=x-user-defined",
            onComplete: function(imageData) {
                  var imageData = "data:image/jpeg;base64,"+base64Encode(imageData.text);
                  console.log(imageData);
            }
        }).get();

The function of base64Encode which I used from the previous answer is:

function base64Encode(str) {
var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var out = "", i = 0, len = str.length, c1, c2, c3;
while (i < len) {
    c1 = str.charCodeAt(i++) & 0xff;
    if (i == len) {
        out += CHARS.charAt(c1 >> 2);
        out += CHARS.charAt((c1 & 0x3) << 4);
        out += "==";
        break;
    }
    c2 = str.charCodeAt(i++);
    if (i == len) {
        out += CHARS.charAt(c1 >> 2);
        out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
        out += CHARS.charAt((c2 & 0xF) << 2);
        out += "=";
        break;
    }
    c3 = str.charCodeAt(i++);
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
    out += CHARS.charAt(c3 & 0x3F);
}
return out;
}

Then I save the result in local storage.

Thank you all :)