javascript - 如果 Canvas 同源标志脏了，如何将图像保存到相册

Question

我在这里面临一个困难的局面。我正在构建一个显示推文的开放式 Web 应用程序。如果这些推文中的任何一条包含图像的 URL，我们将显示带有图像标签的图像。我想让用户选择将此图像保存到他的相册或使用共享网络事件共享它。

所有处理图像的网络事件都希望 blob 起作用。我们不能简单地向它传递一个 URL。我无法从远程图像构建 blob，因为一旦我尝试使用 drawImage Canvas 调用将该图像 blit 到 Canvas 中，我就会在 Canvas 上收到安全错误，因为图像与应用程序的来源不同.

这种“安全性”可以防止对远程图像进行各种类型的修改，例如将其保存到磁盘或使用网络事件。

我知道这是规范的一部分，但我不太明白其目的。毕竟它只是图像，如果我正在编写远程图像的保存脚本，我有可能知道我在做什么，但话又说回来，我不是决定该规范的 w3c 小组的一员，那些人要聪明得多比我多，所以我可能正在监督一些事情......

无论如何，让我们总结一下:“我如何从源指向与 Open Web App 不同的远程位置的 img 标签到可用于 Web 事件的 blob？”

谢谢

Answer 1

然后 Share事件不支持使用 URL。样板应用程序有一个 example of this .如果您不介意您的应用程序被授予特权(这需要市场进行彻底审查)，您可以尝试使用 systemXHR .代码将类似于:

       var xhr = new XMLHttpRequest({
            mozSystem: true
        });
        xhr.open("GET", "url to image", true);
        xhr.responseType = "blob";
        xhr.onload = function () {
            //sample activity - use any activity that requires blob
            var activity = new MozActivity({
            name: "open",
            data: {
                type: "image/png",
                blob: this.response,
            },
            });
        };
        xhr.onerror = function () {
            alert("Error with System XHR");
        };
        xhr.send();