为什么在 Apple 设备上解码 base64 文本字符串时会看到裁剪的图像？

Question

I have an iOS app that gets an image as a base64 encoded string from an API. (I know that maybe it's not the best solution, but that not the question).

When I decode this string to create an UIImage with the following code:

// If don't don't append "=" I'll get nil data in the next line: (string.count % 4 == 0) is required
    let stringWithEquals:String = getMyString() + "=" 
    let data = Data.init(base64Encoded: stringWithEquals, options: .ignoreUnknownCharacters)!
    self.myPicture.image = UIImage(data: data )

The returned image is cropped (I added the red background just for developing purposes):

As you can see I get an error saying that "Failed to convert UIImage to PNG" .

---

So at this point I started to think that maybe there was a mistake in my code. Maybe I was getting an incomplete string or the was some missing step in the decoding. So I asked the backend guy and he confirmed me that the string was correct. Also I checked with my colleague who works on the Android version and the same string works properly in his app.

So I tested the string in an online decoder and I founded the same cropped result using Safari Versión 13.0.5 (15608.5.11), but the full image using Firefox :

WTF !

I tested it with the same result in several web decoders:

• https://codebeautify.org/base64-to-image-converter
• https://www.base64decode.net/base64-image-decoder
• https://freeonlinetools24.com/base64-image

OK, so I tried to download the image from Firefox and try to encode/decode it myself, but surprise. I can see the image but I can't download it complete on my Mac.

This are the images downloaded from Firefox in png and jpg

I've been trying to find a solution in google and several forums, including a lot of StackOverflow questions, but nothing related to this.

Please notice the following points:

• The returned decode data is not nil . I'm appending "=" characters at the end of the string to ensure that the string length % 4 == 0 .I've found a lot of questions about that problem, I am able to decode the image, but cropped.
• I'm 100% sure that the string is complete, I've checked it with my backend and android colleagues.
• It seems to be a problem related to the Apple environment, I can't see the image in my iOS app neither in Safari, but I can see it in Firefox running on a Mac Computer. Also it's not happening only in my computer. Some other colleagues tested in their iPhones with same result.

---

The base64 string is REALLY LONG (I'll pasting it below). So I tried to decode half of the string just to be sure that the problem was not related with the size and I've found something curios. If I decode just half of the string I also get the result cropped:

    let stringWithEquals:String = getMyString().prefix(getMyString().count/2) + "="

I don't know if this approximation is correct but I tried it.

---

I tried to find a solution using an Objective-C function but the result was the same:

-(NSData *)base64DataFromString: (NSString *)string{
    unsigned long ixtext, lentext;
    unsigned char ch, inbuf[4], outbuf[3];
    short i, ixinbuf;
    Boolean flignore, flendtext = false;
    const unsigned char *tempcstring;
    NSMutableData *theData;

    if (string == nil){
        return [NSData data];
    }

    ixtext = 0;

    tempcstring = (const unsigned char *)[string UTF8String];

    lentext = [string length];

    theData = [NSMutableData dataWithCapacity: lentext];

    ixinbuf = 0;

    while (true){
        if (ixtext >= lentext){
            break;
        }
        ch = tempcstring [ixtext++];

        flignore = false;

        if ((ch >= 'A') && (ch <= 'Z')){
            ch = ch - 'A';
        }else if ((ch >= 'a') && (ch <= 'z')){
            ch = ch - 'a' + 26;
        }else if ((ch >= '0') && (ch <= '9')){
            ch = ch - '0' + 52;
        }else if (ch == '+'){
            ch = 62;
        }else if (ch == '='){
            flendtext = true;
        }else if (ch == '/'){
            ch = 63;
        }else{
            flignore = true;
        }

        if (!flignore){
            short ctcharsinbuf = 3;
            Boolean flbreak = false;

            if (flendtext){
                if (ixinbuf == 0){
                    break;
                }
                if ((ixinbuf == 1) || (ixinbuf == 2)){
                    ctcharsinbuf = 1;
                }else{
                    ctcharsinbuf = 2;
                }
                ixinbuf = 3;

                flbreak = true;
            }

            inbuf [ixinbuf++] = ch;

            if (ixinbuf == 4){
                ixinbuf = 0;

                outbuf[0] = (inbuf[0] << 2) | ((inbuf[1] & 0x30) >> 4);
                outbuf[1] = ((inbuf[1] & 0x0F) << 4) | ((inbuf[2] & 0x3C) >> 2);
                outbuf[2] = ((inbuf[2] & 0x03) << 6) | (inbuf[3] & 0x3F);

                for (i = 0; i < ctcharsinbuf; i++){
                    [theData appendBytes: &outbuf[i] length: 1];
                }
            }

            if (flbreak){
                break;
            }
        }
    }
    return theData;
}

So at this point I'm completely lost. Why this is happening?

And here it is the damm base64 String

THE DAMM STRING AT GITHUB

Answer 1

The fact that you had to " append "="... so it would be evenly divisible by 4 " is a big clue. That means your string is formatted incorrectly.

If you check the length of your string (that you posted at GitHub), you'll see it is 65535 ... which is also 0xFFFF ... which is also 16-bits .

So, it sounds like your "API" is not returning the complete image.