Little help ! HTTP Native give me different result depending on platform

Ionic Native
1

Hello everyone,

I’m using HTTP Native plugin for fetching an image from the web. [HTTP - Awesome Cordova Plugins](http://Doc HTTP Native plugin)

It’s working like a charm on iOS, i converted the string that the plugin gave me to an UTF8Array and then to a blob.

But for some reason, on Android the first byte of the UTF8Array is missing, in consequence the blob is damaged and unreadable by the browser.

Here is the result code in iOS :slight_smile:

[ng] [console.log]: “res.data.slice(0,100)” “PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0001@\u0000\u0000\u0001h\b\u0006\u0000\u0000\u0000&o"ñ\u0000\u0000\u0000\u0019tEXtSoftware\u0000Adobe ImageReadyqÉe<\u0000\u0000\u0003hiTXtXML:com.adobe.xmp\u0000\u0000\u0000\u0000\u0000”

[ng] [console.log]: “toUTF8Array(res.data).slice(0,100) :” [194,137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,1,64,0,0,1,104,8,6,0,0,0,38,111,34,195,177,0,0,0,25,116,69,88,116,83,111,102,116,119,97,114,101,0,65,100,111,98,101,32,73,109,97,103,101,82,101,97,100,121,113,195,137,101,60,0,0,3,104,105,84,88,116,88,77,76,58,99,111,109,46,97,100,111,98,101,46,120,109,112,0,0]

On Android : `

res.data.slice(0,100) :
PNG
IHDR@h&o"ñtEXtSoftwareAdobe ImageReadyqÉe<hiTXtXML:com.adobe.xmp<`
“toUTF8Array(res.data).slice(0,100) :” [80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,1,64,0,0,1,104,8,6,0,0,0,38,111,34,195,177,0,0,0,25,116,69,88,116,83,111,102,116,119,97,114,101,0,65,100,111,98,101,32,73,109,97,103,101,82,101,97,100,121,113,195,137,101,60,0,0,3,104,105,84,88,116,88,77,76,58,99,111,109,46,97,100,111,98,101,46,120,109,112,0,0,00]

Every times the first two values of the array are missing and i don’t know how to fix this problem.

Here is the code :

     var url = 'https://ionicframework.com/docs/assets/icons/native-cordova-bot.png'
      this.httpNative.get(  url, {}, {}).then(res => {
        console.log('res.data.slice(0,100)',res.data.slice(0,100))
        function toUTF8Array(str) {
          var utf8 = [];
          for (var i=0; i < str.length; i++) {
            var charcode = str.charCodeAt(i);
            if (charcode < 0x80) utf8.push(charcode);
            else if (charcode < 0x800) {
              utf8.push(0xc0 | (charcode >> 6),
                  0x80 | (charcode & 0x3f));
            }
            else if (charcode < 0xd800 || charcode >= 0xe000) {
              utf8.push(0xe0 | (charcode >> 12),
                  0x80 | ((charcode>>6) & 0x3f),
                  0x80 | (charcode & 0x3f));
            }
            // surrogate pair
            else {
              i++;
              charcode = ((charcode&0x3ff)<<10)|(str.charCodeAt(i)&0x3ff)
              utf8.push(0xf0 | (charcode >>18),
                  0x80 | ((charcode>>12) & 0x3f),
                  0x80 | ((charcode>>6) & 0x3f),
                  0x80 | (charcode & 0x3f));
            }
          }
          return utf8;
        }
        console.log('toUTF8Array(str).slice(0,100)', toUTF8Array(res.data).slice(0,100));
        var blob = new Blob([stringToUint(res.data)], {type: res.headers['content-type']});
        console.log('blob =', blob);
      });

EDIT:

33
331830×238 24 KB

Actually i think it’s this character that my console cannot display which correspond to the two elements missing in the array.

28
28870×80 4.44 KB

2

I know it’s too late but problem is still there
If somebody will have that issue
To fix the problem you need to to use cordova sendRequest with responseType arraybuffer and then convert bytes to base64