使用 crossOrigin 属性加载图像。在 Firefox 插件 sdk 中
Load image using crossOrigin attr. in Firefox addon 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);
}
请求已完成,但响应 header 为空 body,我认为是跨源问题,因为它从允许跨源的页面成功加载。
如何解决这个内部内容脚本?我需要图像数据将其存储在本地存储中。
此致,
穆罕默德.
首先你应该实际检查这是否是一个跨源问题。例如,由于引用限制,HTTP 响应可能为空。虽然在这种情况下服务器应该 return 某种错误或重定向。
其次,如果服务器不发送 necessary headers.
,仅在图像本身上设置 CORS 标志将不会执行任何操作
如果这仅限于特定域,您可以通过在 package.json 中声明必要的权限来使用 cross-domain content scripts via page-mod or tab.attach。
然后你可以使用特权 XHR 获取图像文件,将接收到的数据转换为 blob url 并将其设置为图像源。
如果您需要访问任意域,则无法使用 addon-sdk 完成此操作,因为它仅提供具有受限权限的脚本。有一个较低级别 API 类似于 sdk 内容脚本,但以系统权限运行:frame scripts。
尽管您必须先 import the XHR constructor 进入框架脚本环境,然后才能应用与上述相同的方法。
问题终于解决了,谢谢大家的讨论。
我是怎么解决的:
问题是@the8472
提到的跨源问题,所以我所做的是使用SDK请求图像,并根据this answer.[=15将其数据转换为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;
}
然后我将结果保存在本地存储中。
谢谢大家:)
在 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);
}
请求已完成,但响应 header 为空 body,我认为是跨源问题,因为它从允许跨源的页面成功加载。
如何解决这个内部内容脚本?我需要图像数据将其存储在本地存储中。
此致, 穆罕默德.
首先你应该实际检查这是否是一个跨源问题。例如,由于引用限制,HTTP 响应可能为空。虽然在这种情况下服务器应该 return 某种错误或重定向。
其次,如果服务器不发送 necessary headers.
,仅在图像本身上设置 CORS 标志将不会执行任何操作如果这仅限于特定域,您可以通过在 package.json 中声明必要的权限来使用 cross-domain content scripts via page-mod or tab.attach。 然后你可以使用特权 XHR 获取图像文件,将接收到的数据转换为 blob url 并将其设置为图像源。
如果您需要访问任意域,则无法使用 addon-sdk 完成此操作,因为它仅提供具有受限权限的脚本。有一个较低级别 API 类似于 sdk 内容脚本,但以系统权限运行:frame scripts。 尽管您必须先 import the XHR constructor 进入框架脚本环境,然后才能应用与上述相同的方法。
问题终于解决了,谢谢大家的讨论。 我是怎么解决的:
问题是@the8472
提到的跨源问题,所以我所做的是使用SDK请求图像,并根据this answer.[=15将其数据转换为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;
}
然后我将结果保存在本地存储中。
谢谢大家:)