如何从 ios webview 读取文档目录中的图像文件
Posted
技术标签:
【中文标题】如何从 ios webview 读取文档目录中的图像文件【英文标题】：How to read image file at documents directory from 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>
【问题讨论】：
【参考方案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标签中。
【讨论】：
以上是关于如何从 ios webview 读取文档目录中的图像文件的主要内容，如果未能解决你的问题，请参考以下文章
如何在 iOS 中将本地（文档目录）html 加载到 webview 中？
iOS：WKWebview 如何允许位于 bundle 中的 html 文件对文档目录进行读取访问