How to display a base64 image within a UIImageView?

objective-c iphone uiimageview uiimage

46,485

Solution 1

You don't have to encode it. Simply make a NSUrl, it knows the "data:"-url.

NSURL *url = [NSURL URLWithString:base64String];    
NSData *imageData = [NSData dataWithContentsOfURL:url];
UIImage *ret = [UIImage imageWithData:imageData];

As mentioned in the comments, you have to make sure that you prepend your data with data:image/png;base64, or else your base64 data is useless.

Solution 2

Very old question, but as of iOS7 there is a new, much easier way to do so, hence I'm writing it here so future readers can use this.

NSData* data = [[NSData alloc] initWithBase64EncodedString:base64String options:0];
UIImage* image = [UIImage imageWithData:data];

Very easy to use, and will not hit the 2048 byte size limit of a URL.

Solution 3

This Code will display an base64 encoded string as a picture:

NSString *str = @"data:image/jpg;base64,";
str = [str stringByAppendingString:restauInfo.picture];
NSData *imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:str]];

restauInfo.picture is an NSString which contains the base64 encoded JPG

In my case the Value from "restauInfo.picture" comes from a database

Solution 4

You can do something like the following:

(UIImage *)decodeBase64ToImage:(NSString *)strEncodeData {
  NSData *data = [[NSData alloc]initWithBase64EncodedString:strEncodeData options:NSDataBase64DecodingIgnoreUnknownCharacters];
  return [UIImage imageWithData:data];
}

Then call it like this:

UIImage *image = [self decodeBase64ToImage:dataString];

Solution 5

Decode Base64 to raw binary. You're on your own here. You might find cStringUsingEncoding: of NSString useful.
Create NSData instance using dataWithBytes:length:
Use [UIImage imageWithData:] to load it.

View more solutions

46,485

Author by

jantimon

https://github.com/jantimon/html-webpack-plugin Follow me: @jantimon

Updated on August 02, 2020

Comments

jantimon almost 4 years

I got this Base64 gif image:

R0lGODlhDAAMALMBAP8AAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAACH5BAUKAAEALAAAAAAMAAwAQAQZMMhJK7iY4p3nlZ8XgmNlnibXdVqolmhcRQA7

Now I want to display this Base64 String within my IPhone App.

I could get this working by using the WebView:

aUIWebView.scalesPageToFit = NO;
aUIWebView.opaque = NO;
aUIWebView.backgroundColor = [UIColor clearColor]; 
[aUIWebView loadHTMLString:
  @"<html><body style=""background-color: transparent""><img src=""data:image/png;base64,R0lGODlhDAAMALMBAP8AAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUKAAEALAAAAAAMAAwAQAQZMMhJK7iY4p3nlZ8XgmNlnibXdVqolmhcRQA7"" /></body></html>"
 baseURL:nil];

Is it possible to do the same thing by using the UIImageView?

ipmcc over 12 years

Yeah! This is super-slick! Perhaps it's worth mentioning that you have to prepend the actual, raw base64 string with "data:image/png;base64," to get this to work. I deduced this from reading the WebView/HMLT code the OP posted, but I can see how some might have missed that nuance and then this wouldn't have worked.
Barlow Tucker almost 12 years

Thanks ipmcc, I was disappointed that it wasn't working, until I read your comment.
Thorsten Niehues over 11 years

I figured this out by the post from masche and the comment from ipmcc. So I decided to write a new answer with code that can just be copied - hope this helps.
Federico Zancan about 11 years

Even if I prepended "data:image/png;base64," (without quotes) to my NSString I keep getting a nil imageData. Could someone bring some light? @ipmcc: what do you mean with "raw" string? Are you meaning the underlying char *?
ipmcc about 11 years

No, I just mean that if the string didn't start with data:image/png;base64, it would need to be prepended. NSString is the type required by -URLWithString:. If you're not having luck, you should double-check your Base64 data.
Federico Zancan about 11 years

@ipmcc you're right, my base64 data was slightly exceeding the 2048 bytes url size limit. Thanks.
Cocoanetics about 11 years

Weird, in all my experiments the NSURL always came out as nil.
hordurh almost 10 years

NSURL always come out as nil for me as well until I realized that the server fed me a Base64 string with a bunch of newlines (\n). When I stripped them off, it worked.
webjprgm about 8 years

Thanks. Here's the UIImage extension I made in Swift based on your answer. extension UIImage { class func fromBase64(base64: String) -> UIImage? { //Remove prefix if present let PREFIX = "data:image/png;base64," let dataOnly: String if base64.startsWith(PREFIX) { dataOnly = base64.substringFromIndex(base64.startIndex.advancedBy(PREFI‌X.length)) } else { dataOnly = base64 } if let data = NSData(base64EncodedString: dataOnly, options: NSDataBase64DecodingOptions.init(rawValue: 0)) { return UIImage(data: data) } return nil } }
YvesLeBorg over 7 years

nice and clean ditto , plus one for the reasonable expectation of blowing the size limit on url.