在 UIWebView 中显示来自相机的 UIImage答案

【问题标题】：Display UIImage from camera in UIWebView在 UIWebView 中显示来自相机的 UIImage
【发布时间】：2011-08-21 11:12:18
【问题描述】：

在我的 iPhone 应用程序中，我希望用户能够用相机拍照，然后让该图像出现在 UIWebView 中的一些本地存储的 HTML 中。

所以我从UIImagePickerController 中获得了UIImage 对象，现在我需要了解如何将其保存到内存中，以便在UIWebView 中引用它。

请注意，我不只是想在UIWebView 中拥有自己的图像（我想在某些 HTML 中将图片用作背景图像，而其他图像在顶部分层）。我还在使用存储在应用程序中的其他图像和 HTML，我通过将 UIWebView 的 baseURL 设置为捆绑路径来引用它们，例如：

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[self.webView loadHTMLString:html baseURL:baseURL];

【问题讨论】：

发现这个问题一直对我有帮助 stackoverflow.com/questions/2453023 - 但仍然很好奇其他人可能会说什么。
这里也有类似的问题：stackoverflow.com/questions/2171029/…

标签： iphone uiwebview uiimage

【解决方案1】：

您绝对可以选择在本地保存文件，获取它的绝对路径并使用它。我曾经用于混合应用程序的另一个选项是将 UIImage 转换为 Base64 字符串并通过 javascript 将其传递给 webview 以执行您想要执行的任何操作。在获得 UIImage 编码后做到这一点（有各种库可以做到这一点：

UIImage *image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
NSString *base64EncodedImage = [Base64 encode:UIImageJPEGRepresentation(image, 0.5)];

然后在您的 HTML 中，您可以有一个方法，该方法提供 base64 图像并将其设置为一些 IMG 或背景或您需要的任何内容：

 function cameraCallback(imageData) {
     var image = document.getElementById('myImage');
     image.src = "data:image/jpeg;base64," + imageData;
 }

或者

<img src="data:image/gif;base64, [YOUR BASE64 STRING HERE]" alt="" width="80" height="15" />

然后在 webview 的 HTML 中你会使用

[mywebview stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"cameraCallback(%@)", base64EncodedImage]];

【讨论】：

有趣，我认为它会奏效的。避免将文件实际保存到光盘的好方法。我的最终解决方案如下所示。
一个不错的解决方案，但对于大图像来说似乎较慢。

【解决方案2】：

这就是我最终这样做的方式。在处理使用相机拍摄的图像的代码中，我实际上将文件直接保存到光盘：

// Get the image out of the camera
UIImage *image = (UIImage *)[info valueForKey:UIImagePickerControllerOriginalImage];

// Images from the camera are always in landscape, so rotate
UIImage *rotatedImage = scaleAndRotateImage(self.image);

// Save the image to the filesystem
NSData *imageData = UIImagePNGRepresentation(rotatedImage);
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsPath = [paths objectAtIndex:0];
NSString* savePath = [documentsPath stringByAppendingPathComponent:@"CameraPhoto.png"];
BOOL result = [imageData writeToFile:savePath atomically:YES];

旋转图像的功能直接复制自此博客http://blog.logichigh.com/2008/06/05/uiimage-fix/。

然后，当我想在 UIWebView 中显示此图像时，我只需执行字符串替换以引用注入图像的路径。所以在我的 HTML 中有 <img src="{CameraPhotoUrl}" /> 然后：

// Build the reference to the image we just saved
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsPath = [paths objectAtIndex:0];
NSString *cameraImagePath = [documentsPath stringByAppendingPathComponent:[NSString stringWithFormat:@"CameraPhoto.png?x=%@", [[NSDate date] description]]];

// Load the HTML into the webview
NSString *htmlFilePath = [[NSBundle mainBundle] pathForResource:@"MyHtmlFile" ofType:@"htm"];
NSString *html = [NSString stringWithContentsOfFile:htmlFilePath encoding:NSUTF8StringEncoding error:nil];
html = [html stringByReplacingOccurrencesOfString:@"{CameraPhotoUrl}" withString:cameraImagePath];
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[self.webView loadHTMLString:html baseURL:baseURL];

瞧！请注意，我将基于日期的查询字符串参数附加到 CameraPhoto.png 文件名只是为了防止缓存。

【讨论】：