Converting Byte Array to UIImage

Question

I've got a byte array stored in my Postgres database (field type bytea).

The API is returning it me like:

iVBORw0KGgoAAAANSUhEUgAAAMEAAADLCAYAAADX2ff6AAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGAqSSwoyGFhYGDIzSspCnJ3UoiIjFJgv8PAzcDDIMRgxSCemFxc4BgQ4MOAE3y7xsAIoi/rgsxK8/x506a1fP4WNq+ZclYlOrj1gQF3SmpxMgMDIweQnZxSnJwLZOcA2TrJBUUlQPYMIFu3vKQAxD4BZIsUAR0IZN8BsdMh7A8gdhKYzcQCVhMS5AxkSwDZAkkQtgaInQ5hW4DYyRmJKUC2B8guiBvAgNPDRcHcwFLXkYC7SQa5OaUwO0ChxZOaFxoMcgcQyzB4MLgwKDCYMxgwWDLoMjiWpFaUgBQ65xdUFmWmZ5QoOAJDNlXBOT+3oLQktUhHwTMvWU9HwcjA0ACkDhRnEKM/B4FNZxQ7jxDLX8jAYKnMwMDcgxBLmsbAsH0PA4PEKYSYyjwGBn5rBoZt5woSixLhDmf8xkKIX5xmbARh8zgxMLDe+///sxoDA/skBoa/E////73o//+/i4H2A+PsQA4AJHdp4IxrEg8AAAGdaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjE5MzwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yMDM8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K0eU+QgAAA+RJREFUeAHt0wENACAMBDFA4/xbgQQb1zlY87dn5i5HICxwwr97ncAXEIEh5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBUSQnwAAEdhAXkAE+QkAEIEN5AVEkJ8AABHYQF5ABPkJABCBDeQFRJCfAAAR2EBeQAT5CQAQgQ3kBR7HxwORQVNBhAAAAABJRU5ErkJggg==

I see that the database field contains:

\211PNG\015\012\032\012\000\000\000\015IHDR\000\000\000\301\000\000\000\313\010\006\000\000\000\327\331\367\372\000\000\001|iCCPICC Profile\000\000(\221c``*I,(\310aa``\310\315+)\012rwR\210\210\214R`\277\303\300\315\300\303 \304`\305 \236\230\\\\\340\030\020\340\303\200\023|\273\306\300\010\242/\353\202\314J\363\374y\323\246\265|\376\0266\257\231rV%:\270\365\201\001wJjq2\003\003#\007\220\235\234R\234\234\013d\347\000\331:\311\005E%@\366\014 [\267\274\244\000\304>\001d\213\024\001\035\010d\337\001\261\323!\354\017 v\022\230\315\304\002V\023\022\344\014dK\000\331\002I\020\266\006\210\235\016a[\200\330\311\031\211)@\266\007\310.\210\033\300\200\323\303E\301\334\300R\327\221\200\273I\006\2719\2450;@\241\305\223\232\027\032\014r\007\020\3130x0\2700(0\2303\0300X2\35028\226\244V\224\200\024:\347\027T\026e\246g\224(8\002C6U\3019?\267\240\264$\265HG\3013/YOG\301\310\300\320\000\244\016\024g\020\243?\007\201Mg\024;\217\020\313_\310\300`\251\314\300\300\334\203\020K\232\306\300\260}\017\003\203\304)\204\230\312<\006\006~k\006\206m\347\012\022\213\022\341\016g\374\306B\210_\234fl\004a\363810\260\336\373\377\377\263\032\003\003\373$\006\206\277\023\377\377\377\275\350\377\377\277\213\201\366\003\343\354@\016\000$wi\340\214k\022\017\000\000\001\235iTXtXML:com.adobe.xmp\000\000\000\000\000<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 5.4.0">\012   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">\012      <rdf:Description rdf:about=""\012            xmlns:exif="http://ns.adobe.com/exif/1.0/">\012         <exif:PixelXDimension>193</exif:PixelXDimension>\012         <exif:PixelYDimension>203</exif:PixelYDimension>\012      </rdf:Description>\012   </rdf:RDF>\012</x:xmpmeta>\012\321\345>B\000\000\003\344IDATx\001\355\323\001\015\000 \014\0041@\343\374[\201\004\033\3279X\363\267g\346.G ,p\302\277{\235\300\027\020\201!\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005D\220\237\000\000\021\330@^@\004\371\011\000\020\201\015\344\005\036\307\307\003\221ASA\204\000\000\000\000IEND\256B`\202

That should be an image represented in byte array.

I want to parse this byte array back to a UIImage using Swift. For that I've the following function:

func convertImage(image: String) -> UIImage? {
    var strings = image.components(separatedBy: ",")
    var bytes = [UInt8]()

    for i in 0 ... strings.count-1 {
        if let signedByte = Int8(strings[i]) {
            bytes.append(UInt8(bitPattern: signedByte))
        } else {
            print("ERROR")
            // Do something with this error condition
        }
    }
    let datos: NSData = NSData(bytes: bytes, length: bytes.count)
    return UIImage(data: datos as Data) // Note it's optional. Don't force unwrap!!!
}

It seems to be looping over this function but "ERROR" does get printed at the end. I however never end up having a UIImage.

What am I doing wrong?

Those "bytes" are encoded in base64, presummably so that your API can send it as text (not binary data). You need to convert it back to binary (Google how) and then you have a Data/NSData instance with which you can initialize an UIImage. — Nicolas Miari
– Nicolas Miari, Commented Sep 6, 2017 at 8:14

Ihar Katkavets · Accepted Answer · 2017-09-06 08:18:10Z

3

iVBORw0KGgoAAAANSUhEUgAAA... represents base64 encoded string. So you just need to convert it to data using method

let data = Data(base64Encoded: "iVBORw0KGgoAAAANSUhEUgAAA...")
let image = UIImage(data: data)

Hope it will help you

answered Sep 6, 2017 at 8:18

Ihar Katkavets

1,58014 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bikramjit Singh · Accepted Answer · 2017-09-06 08:18:06Z

let o = Int8("-127")
print(o.dynamicType) // Optional(<Int8>)
// It's optional, so we need to unwrap it...
if let x = o {
print(x) // -127, as expected
//let b = UInt8(x) // Run time crash
let b = UInt8(bitPattern: x) // 129, as it should be
}

Therefore your function should be

func convierteImagen(cadenaImagen: String) -> UIImage? {
var strings = cadenaImagen.componentsSeparatedByString(",")
var bytes = [UInt8]()
for i in 0..< strings.count {
    if let signedByte = Int8(strings[i]) {
        bytes.append(UInt8(bitPattern: signedByte))
    } else {
        // Do something with this error condition
    }
}
let datos: NSData = NSData(bytes: bytes, length: bytes.count)
return UIImage(data: datos) // Note it's optional. Don't force unwrap!!! 
}

Collectives™ on Stack Overflow

Converting Byte Array to UIImage

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related