如何从 ios webview 读取文档目录中的图像文件答案

【问题标题】：How to read image file at documents directory from ios webview如何从 ios webview 读取文档目录中的图像文件
【发布时间】：2013-07-05 18:15:16
【问题描述】：

我正在下载图像文件并写入如下文档目录：

NSArray   *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString  *documentsDirectory = [paths objectAtIndex:0];

NSString  *objURL = @"http://test.test.com/file/image.png";
NSURL     *objurl = [NSURL URLWithString:objURL];
NSData    *imgData = [NSData dataWithContentsOfURL:objurl];

NSString *imgFile = [NSString stringWithFormat:@"%@/%@", documentsDirectory,@"image.png"];
[imgData writeToFile:imgFile atomically:YES];

在我的 webView 中，我从捆绑资源中加载了一个 html 文件以在我的 webView 中使用，但是如何在 html 中使用标签来读取文档目录中的 image.png？

<html>
<body>
    <img src="../what/is/the/path/to/use/image.png" />
</body>
</html>

【问题讨论】：

标签： html ios webview

【解决方案1】：

您可以使用带有file:// 方案的绝对路径来提供此图像的 URL：

NSString *documentsDirectory = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,YES)[0];
NSString *filePath = [NSString stringWithFormat:@"file://%@/image.png", documentsDirectory];

然后您可以运行一些 javascript 来更新 src 标记以将其更新到新路径：

NSString *javascript = [NSString stringWithFormat:@"var imageElement = document.getElementById('localFile'); imageElement.setAttribute('src', '%@');", filePath];
[self.webView stringByEvaluatingJavaScriptFromString:javascript];

在您的 HTML 中，路径类似于：

<html>
    <body>
        <img id="localFile" src="file:///var/mobile/Applications/3D7D43E8-FA5E-4B19-B74C-669F7D1F3093/Documents/image.png" />
    </body>
</html>

【讨论】：

查看来自 Safari 远程调试器的屏幕截图here
但是图片可以从app bundle中加载
Safari 控制台显示错误“加载资源失败：无法完成操作。不允许操作'

【解决方案2】：

我没有评估 JavaScript，而是在我的 html 内容中写下一个占位符，然后直接用所需的内容替换它：

NSString *htmlFilePath = [[NSBundle mainBundle] pathForResource:@"sample" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:htmlFilePath encoding:NSUTF8StringEncoding error:&error];
if (error) {
  // handle error
  return;
}

NSString *imageFilePath = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) firstObject] stringByAppendingPathComponent:@"sample_image.png"];
NSURL *imageFileURL = [NSURL fileURLWithPath:imageFilePath];
NSString *sampleImageReplacement =
  [NSString stringWithFormat:@"<img src=\"%@\" />", [imageFileURL absoluteString]];

// Replace the placeholder w/ real content,
//   and of course, we can also replace it w/ empty string
//   if the image cannot be found.
htmlString = [htmlString stringByReplacingOccurrencesOfString:@"%sample_image%"
                                                   withString:sampleImageReplacement];
...
[webView loadHTMLString:htmlString baseURL:nil];

【讨论】：

【解决方案3】：

您可以从应用程序包中加载图像，但不能直接从文档目录中加载图像。

但是有一个解决方法。

使用CocoaHTTPServer创建一个InAppHttpServer，你可以在web视图中使用http URL访问documents目录下的图片。

否则

将图片转成base64并使用webview的evaluatejavascript加载图片

document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );

【讨论】：

【解决方案4】：

您不能从头开始绑定图像源。您必须通过 JavaScript 来完成。

您需要通过评估JS将图像的路径传递给UIWebView。在这里你可以传递你的图片的路径，JS会将图片加载到相应的HTML标签中。

【讨论】：