CODEWITHSUNDEEP
javascriptformattingxmlhttprequestimage-formats
Jiri Zaloudek
Jiri Zaloudek

Reputation: 380

XmlHttpRequest file (image) <=> raw data reformatting?

I have downloaded some basic image somewhere from google:

enter image description here

this picture looks like: enter image description here

then I use this httprequest to read and save raw data of the image:

    var xhr = new XMLHttpRequest;
xhr.open("GET", pInput, false);
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        return xhr.responseText;
    }
};

and it looks it works fine but its only somehow reformatted: enter image description here

any idea how to at least find out which format it is returns from XMLHttpRequest so I can try to reformate it back?

NOTE: I use the solution to read raw data of the image to be able to send it via next httprequest to CDN server via their API. I have found out the Image after upload can not be viewed, so I have identified the problem of the first httprequest above that the encoding is different from input file... basicaly when I save this initial httprequest as .jpg file, it can not be displayed as no software know this format

Upvotes: 0

Views: 52

Answers (1)

Jiri Zaloudek
Jiri Zaloudek

Reputation: 380

this was a nightmare, but I guess the issue that ByteScale CDR API didnt like the string as binary input... however byteArray of the image XMLHttpRequest works fine.

Working example:

function share_image(pInput) {
    var xhr_image = new XMLHttpRequest;
    xhr_image.open("GET", pInput, false);
    xhr_image.responseType = "arraybuffer";

    xhr_image.onreadystatechange = function() {
        if (xhr_image.readyState === XMLHttpRequest.DONE) {

            const image_return = xhr_image.response; // Note: NOT xhr_image.responseText
            var xhr_upload = new XMLHttpRequest();

            // when responce received then do the following script:
            xhr_upload.onreadystatechange = function() {

                if (xhr_upload.readyState === XMLHttpRequest.DONE) {   // && xhr_upload.status >= 200 && xhr_upload.status <= 400 // on Windows this works fine, on Android not?

                    // Check if reply is proper JSON
                    try { var response = JSON.parse(xhr_upload.responseText.toString()); }
                    catch (exception) {
                        console.log("Return message is NOT Json:", xhr_upload.responseText.toString());
                        return false;
                    }

                    // Return ERROR check
                    if (response.error) {
                        console.log("ByteScale API Error: " + JSON.stringify(response.error));
                        return false;
                    }

                    // Show responce here
                    console.log("ByteScale API Reply:", JSON.stringify(response));
                    return true;
                }
            }

            xhr_upload.open("POST", "https://api.bytescale.com/v2/accounts/yyyyyy/uploads/binary");
            xhr_upload.setRequestHeader('Accept', 'image/jpeg');
            xhr_upload.setRequestHeader('Authorization', 'Bearer public_xxxxxxxxxxxxxxxxxxxx');
            xhr_upload.setRequestHeader('Content-Type', 'image/jpeg');      // QML does not know XMLHttpRequest.getResponseHeader('Content-Type') ???
            xhr_upload.setRequestHeader('Content-Length', image_return.length);     // only if not sending header Transfer-Encoding: chunked
            //xhr_upload.setRequestHeader('Transfer-Encoding', 'chunked');  // no idea how this works
            xhr_upload.send(image_return);
        }
    }
    xhr_image.send();
}

Upvotes: 0

Related Questions