1

我正在使用 Firefox 插件 SDK 创建一个 Firefox 插件。我想将页面中的所有图像保存到本地磁盘。我尝试将以下脚本附加到活动选项卡，然后将结果数组发送回 main.js，我将在其中将其保存到磁盘。以下代码给了我一个SecurityError: The operation is insecure错误，可能是因为我从跨源加载图像所以toDataURL被阻止。我知道我可以将图像下载到磁盘上的某个位置，但我不想重新下载所有图像，因为我的浏览器已经这样做了。是否有另一种方法可以将已加载的图像保存到本地磁盘？

function getImage(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    //var dataURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

function getImages(outputDir){
    var coded_images = new Array();
    var images = document.getElementsByTagName('img');
    for (var i=0; i<images.length; i++){
        coded_images[i] = getImage(images[i]);
    }

    //send coded_images back to main.js
}

谢谢您的帮助！

更新： 我得到的上述代码的例外是：

SecurityError: The operation is insecure.
Traceback (most recent call last):
...
  File "resource://myaddon/data/addon.js", line 18, in getImage
    var dataURL = canvas.toDataURL("image/png");
4

1 回答 1

1

使用<canvas>保存图像实际上不是一个好主意。这将重写实际数据和/或什至更改格式，同时放弃过程中的任何元数据。

此外，由于违反了同源策略，预计会出现安全异常（导出图像将使网站能够“读取”它，尽管它包含来自其他来源的部分）。您必须以特权运行该代码（在 chrome XUL 上下文中），但无论如何，这在 SDK 代码中很难做到。

我建议您查看常规上下文菜单如何执行“保存图像”内容并从那里返回。由于画布本身以及必须解码图像，它还可能导致额外的 CPU 和内存负载，而此时它们不一定是解码的。

或者只是保存图像，它仍然可能从缓存中获取它，这取决于您如何执行它以及最初检索的缓存标头（例如，XHR 或request模块保存通常不会绕过缓存）。

或者nsICacheStorageService，如果未缓存，则使用并退回到常规保存。

于 2013-09-30T15:56:10.753 回答