Question

我正在使用Firefox附加SDK创建一个Firefox附加组件。我想将页面中的所有图像保存到本地磁盘。我尝试将以下脚本附加到活动选项卡，然后将结果数组发送回main.js，我将其保存到磁盘。以下代码为我提供了 SecurityError：操作不安全错误，可能是因为我从交叉原点加载图像，因此 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");

Answer 1

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

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

我建议您查看常规上下文菜单如何处理Save Image内容并从那里开始工作。它可能还会导致额外的CPU和内存负载，这是由于画布本身以及必须解码的图像，它们不一定在那时。

或者只是保存图像，它仍然可以从缓存中获取它，具体取决于您的操作方式和最初检索的缓存头（例如，XHR或request模块保存通常不会绕过缓存）。

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

Javascript＆amp; FF-addon：如何将图像保存到本地磁盘而无需重新下载

1 个答案: