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

Question

I have downloaded some basic image somewhere from google:

this picture looks like:

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:

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

What is the actual issue you're trying to solve? How is the change in encoding relevant? — Rory McCrossan
– Rory McCrossan, Commented Jul 9, 2024 at 9:21
Most of the output looks the same, but there appear to be some issues related to character encoding. But I can't tell what actual problem you are trying to solve here. What are you trying to do with this data? — C3roe
– C3roe, Commented Jul 9, 2024 at 9:25
you haven't shown what you are doing to send it via next httprequest - that's where your mistake is most likely - hard to tell without the code — Jaromanda X
– Jaromanda X, Commented Jul 9, 2024 at 9:54
interesting use of synchronous request and onreadystatechange - from the docs "Warning: This should not be used with synchronous requests" — Jaromanda X
– Jaromanda X, Commented Jul 9, 2024 at 9:56
First verify that the server at pInput is correctly serving your image by visiting pInput in your browser and make sure you get a visible image back. You can refer to mdn docs to figure out how to get the binary data correctly via xmlhttprequest. — James
– James, Commented Jul 9, 2024 at 13:57

Jiri Zaloudek · Accepted Answer · 2024-07-10 08:04:36Z

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();
}

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related