Javascript 使用交叉原点属性加载图像。在Firefox插件sdk中

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

请求已经完成，但是响应头是空的，我认为交叉源代码中存在问题，因为它成功地从页面“允许交叉源代码”加载

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

问候,，

---

穆罕默德。

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

其次，如果服务器不发送请求，仅在映像本身上设置CORS标志不会起任何作用

如果这仅限于特定域，则可以通过或通过在package.json中声明必要的权限来使用。 然后，您可以使用特权XHR获取图像文件，将接收到的数据转换为图像，并将其设置为图像源

如果您需要访问任意域，则无法使用插件sdk完成此操作，因为它只提供具有受限权限的脚本。有一个较低级别的API，它类似于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();

正如8472所提到的那样，这个问题是一个跨源问题，因此我所做的是使用SDK对图像进行请求，并基于XML将其数据转换为base64

像这样使用Sign 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;
}

函数base64Encode（str）{
var CHARS=“abcdefghijklmnopqrstuvxyzabefghijklmnopqrstuvxyz012456789+/”；
var out=“”，i=0，len=str.length，c1，c2，c3；
而（我>2）；
out+=字符字符（（c1和0x3）>2）；
out+=字符字符（（（c1&0x3）>4））；
out+=字符字符（（c2&0xF）>2）；
out+=字符字符（（（c1&0x3）>4））；
out+=字符字符（（c2&0xF）>6）；
out+=字符（c3和0x3F）；
}
返回；
}

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

---

谢谢大家：）

问题现在解决了，我不知道是什么问题，我已经检查了服务器是否允许跨源，它在Chrome中工作正常。问题在“onload”中事件，但现在它适用于未知的reaosn！我也尝试过下载较低大小的图像，但它不起作用，只是在我的服务器中使用了图像，并在服务器端应用了交叉源。是的，正如我所预料的……事件onload中的问题，它在chrome中工作正常，但我不知道在Firefox中它有什么问题：\@Mohammad when y你能找出根本原因吗？你能分享一下根本原因是什么吗？很高兴知道我们自己和我们帮助他人：）

访问控制允许源代码：*

似乎不正确，如果它应该是通配符，它应该是单个的

*

@Noitidart谢谢你的时间和信息。我在这里做的是下载图片om

staticflickr.com

并将其转换为数据并保存到存储器中。当我怀疑跨源时，我已从服务器请求图像，并将“允许的源”设置为*并且工作正常。现在，我将查看问题是否出在服务器端我可以更改图像…我不知道为什么它在Chrome中工作正常：\