Używam API Google, przesyła obrazy tylko jako dane binarne.

Nie mam absolutnie żadnego pojęcia, jak umieścić to w URI danych, aby go wyświetlić, dzięki za każdą pomoc!

Wezwanie, o którym mówię, to Niniejsze połączenie API.

Jak widać, mówi:

Serwer zwraca bajty zdjęcia.

W przypadku połączenia (jest to rozszerzenie), używam metod chrome_ex_oauth. Może muszę dodać coś do nagłówku, aby uzyskać prawdziwe dane binarne, nie ciągnąć tak, jak wchodzi teraz ...

Potrzebuję tego, aby przekonwertować wynikowy binarny do danych URI, więc mogę go wyświetlić.


Ok, wyciągam to z prośby XHR

enter image description here

Teraz nie wiem zbyt wiele binarnych rzeczy. Jest to w jakiś sposób zakodowane dane binarne, które zakładam? Próbowałem to umieścić w BTOA i innych koderach Base64, wszystko rzuca błąd. Próbowałem przesadzać z różnymi rzeczami, a "odpowiedź" zmieniła się w kilka dziwnych sposobów, ale nic nie akceptuje danych.

Więc teraz mam ten kod:

var nxhr = new XMLHttpRequest();
nxhr.onreadystatechange = function (data) {
    if (nxhr.readyState == 4) {
        console.log(nxhr);
    }
};
nxhr.open(method, url, true);
nxhr.setRequestHeader('GData-Version', '3.0');
nxhr.setRequestHeader('Authorization', oauth.getAuthorizationHeader(url, method, params));
nxhr.send('Data to send');

Każdy inny ma jakiś pomysł, jak to dostać dla mnie, nie zrozumiała odpowiedź na URI danych ???

Dzięki za wszelką pomoc

8
Luke 6 grudzień 2011, 06:41

3 odpowiedzi

Najlepsza odpowiedź

Ok, znalazłem rozwiązanie ...

Przede wszystkim żądanie musi zastąpić typ Returend do zdefiniowanego przez użytkownika X

xhr.overrideMimeType('text\/plain; charset=x-user-defined');

Następnie dane są nietknięte przez przeglądarkę.

Użyj następującego enkodera Base64

Base64 = {

            // private property
            _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

            encodeBinary: function (input) {
                var output = "";
                var bytebuffer;
                var encodedCharIndexes = new Array(4);
                var inx = 0;
                var paddingBytes = 0;

                while (inx < input.length) {
                    // Fill byte buffer array
                    bytebuffer = new Array(3);
                    for (jnx = 0; jnx < bytebuffer.length; jnx++)
                        if (inx < input.length)
                            bytebuffer[jnx] = input.charCodeAt(inx++) & 0xff; // throw away high-order byte, as documented at: https://developer.mozilla.org/En/Using_XMLHttpRequest#Handling_binary_data
                        else
                            bytebuffer[jnx] = 0;

                    // Get each encoded character, 6 bits at a time
                    // index 1: first 6 bits
                    encodedCharIndexes[0] = bytebuffer[0] >> 2;
                    // index 2: second 6 bits (2 least significant bits from input byte 1 + 4 most significant bits from byte 2)
                    encodedCharIndexes[1] = ((bytebuffer[0] & 0x3) << 4) | (bytebuffer[1] >> 4);
                    // index 3: third 6 bits (4 least significant bits from input byte 2 + 2 most significant bits from byte 3)
                    encodedCharIndexes[2] = ((bytebuffer[1] & 0x0f) << 2) | (bytebuffer[2] >> 6);
                    // index 3: forth 6 bits (6 least significant bits from input byte 3)
                    encodedCharIndexes[3] = bytebuffer[2] & 0x3f;

                    // Determine whether padding happened, and adjust accordingly
                    paddingBytes = inx - (input.length - 1);
                    switch (paddingBytes) {
                        case 2:
                            // Set last 2 characters to padding char
                            encodedCharIndexes[3] = 64;
                            encodedCharIndexes[2] = 64;
                            break;
                        case 1:
                            // Set last character to padding char
                            encodedCharIndexes[3] = 64;
                            break;
                        default:
                            break; // No padding - proceed
                    }
                    // Now we will grab each appropriate character out of our keystring
                    // based on our index array and append it to the output string
                    for (jnx = 0; jnx < encodedCharIndexes.length; jnx++)
                        output += this._keyStr.charAt(encodedCharIndexes[jnx]);
                }
                return output;
            }
        };

Jest magiczne rzeczy opublikowane przez Mozillę, który nie pozwolił mi poprawnie kodować rzeczy

bytebuffer[jnx] = input.charCodeAt(inx++) & 0xff

Ostateczny kod będzie wyglądał taki jak ten ...

oauth.authorize(function () {
    var method = "GET", params = {}, url = photo.href;

    var nxhr = new XMLHttpRequest();
    nxhr.onreadystatechange = function (data) {
        if (nxhr.readyState == 4) {
            console.log("<img src='data:image/*;base64," + Base64.encodeBinary(nxhr.response) + "' />");
        }
    };
    nxhr.open(method, url, true);
    nxhr.setRequestHeader('GData-Version', '3.0');
    nxhr.setRequestHeader('Authorization', oauth.getAuthorizationHeader(url, method, params));
    nxhr.overrideMimeType('text\/plain; charset=x-user-defined'); 
});

Str.s. Jeśli umieścisz "Data: Image / *" do okna przeglądarki bezpośrednio, pobierze plik i nie byłby w stanie go otworzyć. Ale jeśli umieścisz go bezpośrednio w IMG SRC, działa dobrze!

5
kiamlaluno 21 grudzień 2011, 23:46

Jeśli używasz URI data:, biorę to, że nie zależy Ci na starszych przeglądarkach. W takim przypadku użyj btoa() zgodnie z sugestią w Jak można kodować ciąg do Base64 w JavaScript? i upadku na Alternatywa wymieniona w drugiej odpowiedzi. Następnie URI data: jest proste:

data:image/*;base64,<the btoa output>
2
Community 23 maj 2017, 12:33

Wszystkie pozostałe rozwiązania są przestarzałe. Nie jest potrzebny BASE64. Sprawdź Moja odpowiedź na Uzyskiwanie blob Dane z żądania XHR .

2
Community 23 maj 2017, 12:09