1

我需要将我的图像标签指向一个不属于我的应用程序的目录。

用例是这是一个通过 Dropbox 交付资产的信息亭应用程序。因此，用户需要通过将 fileSystem 对象指向所需的 Dropbox 目录来配置应用程序，然后应用程序将使用该目录来获取其媒体。

fileSystemEntry返回如下所示的路径： ~/Dropbox/and/so/on/and/so/forth

我试图弄清楚是否有任何方法可以明确地使用它

<img src="~/Dropbox/and/so/on/and/so/fort/image.png"/>

或通过一些 hacky 替代方案，如

<img src="file:///users/someuser/Dropbox/and/so/on/and/so/forth"/>

但是，我尝试过的所有各种组合都会产生损坏的图像 - 即使当我检查元素并在控制台中单击它时，Chrome 能够将图像作为独立实体查看，所以我知道路径是正确的。

我觉得我忽略了一些明显的东西，但是找不到任何关于如何正确地将我的资源瞄准文件系统的文档。

4

3 回答 3

3

您不使用 file:// URL，也不使用任何 --allow... 例外。一旦你有了 FileEntry，你就可以从图像中获取二进制数据并将其形成一个数据 URL，你可以直接将其用作 img src。看我对这个问题的回答：chrome packaged app image access

更新：给定一个文件对象（文件），这是设置图像（img）的 src 属性的代码：

img.src = webkitURL.createObjectURL(file);

如果你有一个 FileEntry，你可以通过 file() 方法获取它的 File。

于 2014-08-22T22:33:48.440 回答
3

您希望该fileEntry.toURL()方法返回filesystem:..可用于将图像直接嵌入页面的 -URL。但是，情况并非如此，因为http://crbug.com/148788。

如果您确定在请求权限后始终可以访问文件系统，从用户文件系统嵌入图像的最有效解决方案是使用blob:-URLs。这是一个没有任何错误处理的示例：

// Within your app's code, somehow get a DirectoryEntry (or FileEntry):
chrome.fileSystem.chooseEntry({
    type: 'openDirectory'
}, function(directoryEntry) {
    // Assume that the user has selected the directory containing the images.
    directoryEntry.getFile('path/to/img.png', function(fileEntry) {
        fileEntry.file(function(file) {
            var url = URL.createObjectURL(file);
            // url looks like "blob:chrome-extension%3A//[extensionid]/[uuid]"
            var img = new Image();
            img.src = url;
            document.body.appendChild(img);
        });
    });
});

如果您事先不知道图像路径，那么您可以使用DirectoryReader(created using directoryEntry.createReader()) 枚举目录中的项目，或者直接提示输入FileEntry(并使用fileEntry.file等，以获取 blob:-URL)。

要尝试前面的代码片段，请使用以下代码manifest.json

{
  "name": "FS App",
  "version": "2",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "permissions": [
    {"fileSystem": ["directory"]}
  ]
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('main.html');
});

main.html

<script src="main.js"></script> <!-- main.js = previous code -->

创建一个包含“path/to/img.png”的目录，加载应用程序，启动应用程序并单击刚刚创建的包含该图片的目录。您将看到图像嵌入在应用程序的文档中。

于 2014-08-23T09:37:22.757 回答
1

资产在用户的 Dropbox 中还是您的？如果它们是您的，您应该能够在将它们公开后使用 fetch 获取它们。

于 2014-08-22T21:06:10.303 回答