2011-08-21 4 views
5

Nella mia app per iPhone, voglio che l'utente sia in grado di scattare una foto con la fotocamera, quindi fare in modo che l'immagine venga visualizzata tra un codice HTML memorizzato localmente in un UIWebView.Visualizza UIImmagine dalla fotocamera in UIWebView

Quindi ho l'oggetto UIImage da UIImagePickerController, ora ho bisogno di scoprire come salvarlo in memoria in modo da poter fare riferimento allo UIWebView.

Nota che non voglio solo l'immagine su di essa nel UIWebView (Voglio usare l'immagine come immagine di sfondo in qualche HTML con altre immagini sovrapposte in alto). Sto anche utilizzando altre immagini e HTML memorizzati in app, che sto riferimento impostando il baseURL del UIWebView al percorso bundle, come:

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

Trovato questa domanda che mi ha aiutato lungo la strada http://stackoverflow.com/questions/2453023 - comunque ancora curioso di quello che altri potrebbero dire. –

+0

C'è una domanda simile qui: http://stackoverflow.com/questions/2171029/how-to-display-locally-stored-images-with-a-uiwebview – user281300

risposta

5

Questo è il modo in cui ho finito per farlo. Nel codice che gestisce l'immagine ripresa con la fotocamera in realtà ho salvare il file direttamente su disco:

// 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]; 

La funzione per ruotare l'immagine viene copiato direttamente da questo blog, http://blog.logichigh.com/2008/06/05/uiimage-fix/.

Quindi, quando voglio visualizzare questa immagine all'interno di UIWebView, faccio semplicemente una stringa di riferimento per sostituire il percorso dell'immagine. Così nel mio HTML c'è come <img src="{CameraPhotoUrl}" /> e poi:

// 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]; 

Voila! Si noti che aggiungo un parametro di stringa di query basato su data al nome file CameraPhoto.png semplicemente per impedire la memorizzazione nella cache.

6

È sicuramente la possibilità di salvare la file localmente, ottenendo il suo percorso assoluto e usando quello. Un'altra opzione che ho usato per un'app ibrida consiste nel convertire la stringa UII nella stringa Base64 e passare quella tramite javascript alla webview per fare tutto ciò che vuoi che faccia. Per fare quello che dopo avere ottenuto l'UIImage codificarlo (ci sono diverse librerie là fuori per fare questo:

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

Poi nel codice HTML si potrebbe avere il metodo che viene dato alle immagini base64 e lo imposta a qualche IMG o sfondo o quello che vi serve:

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

o

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

Poi nel codice HTML in WebView si usa

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

Interessante, immagino che avrebbe funzionato. Un buon modo per evitare di dover effettivamente salvare il file sul disco. La mia soluzione finale è mostrata di seguito. –

+0

Una bella soluzione ma sembra più lenta per le immagini grandi. –