使用crossOrigin属性加载图像.在Firefox插件sdk中

Question

在Firefox插件SDK的内容脚本中，我以这样的方式加载图像：

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);
}

请求已经完成，但响应标头是空的，我认为跨原点的问题是因为它从页面成功加载允许跨原点。

如何解决此内部内容脚本？我需要图像数据将其存储在本地存储器中。

谨致问候，穆罕默德。

Answer 1

首先，您应该检查这是否是一个跨原点问题。例如，由于引用限制，HTTP响应可能为空。尽管在这种情况下服务器应该返回某种错误或重定向。

其次，如果服务器不发送必要的头，那么仅仅在图像上设置CORS标志本身就没有任何作用。

如果这仅限于特定的域，您可以通过在package.json中声明必要的权限，通过page mod或tab.attach使用跨域内容脚本。然后，您可以使用特权XHR获取图像文件，将接收到的数据转换为blob-url，并将其设置为图像源。

如果您需要访问任意域，那么使用addon-sdk无法做到这一点，因为它只提供具有受限权限的脚本。有一个较低级别的API类似于sdk内容脚本，但使用系统权限运行：框架脚本。尽管您必须先将XHR构造函数导入到框架脚本环境中，然后才能应用与上面相同的方法。

Answer 2

问题终于解决了，谢谢大家的热烈讨论。我是如何解决的：

正如@the8472所提到的，这个问题是一个跨来源的问题，所以我所做的是使用图像的SDK发出请求，并根据这个答案将其数据转换为base64。

请求使用类似的SDK：

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();

我在前面的回答中使用的base64Encode的函数是：

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;
}

然后我将结果保存在本地存储中。

谢谢大家：）