在 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 为空主体,我认为是跨源问题,因为它从页面成功加载允许跨源。
如何解决这个内部内容脚本?我需要图像数据将其存储在本地存储中。
问候, 穆罕默德。
最佳答案
首先,您应该实际检查这是否是跨域问题。例如,由于引用限制,HTTP 响应可能为空。虽然在这种情况下服务器应该返回某种错误或重定向。
其次,如果服务器不发送 necessary headers,仅在图像本身上设置 CORS 标志将不会执行任何操作。 .
如果这仅限于特定域,您可以使用 cross-domain content scripts通过page-mod或 tab.attach通过在 package.json 中声明必要的权限。 然后你可以使用特权 XHR 获取图像文件,将接收到的数据转换为 blob url。并将其设置为图像源。
如果您需要访问任意域,则无法使用 addon-sdk 完成此操作,因为它仅提供具有受限权限的脚本。有一个类似于 sdk 内容脚本但以系统权限运行的较低级别的 API:frame scripts . 虽然你必须 import the XHR constructor在应用与上述相同的方法之前,请先进入框架脚本环境。
关于javascript - 使用 crossOrigin 属性加载图像。在 Firefox 插件 sdk 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28386490/