Angular JS - żądanie w celu uzyskania obrazu

Question

Chciałbym wyświetlić obraz jpeg w interfejsie użytkownika. W tym celu proszę o moją usługę (metoda GET), a potem przekształca się oprzeć 64:

$http({ 
    url: "...", 
    method: "GET", 
    headers: {'Content-Type': 'image/jpeg'}    
}).then(function(dataImage){ 
    var binary = ''; 
    var responseText = dataImage.data; 
    var responseTextLen = dataImage.data.length; 
    for (var j = 0; j < responseTextLen; j+=1) { 
     binary += String.fromCharCode(responseText.charCodeAt(j) & 0xff) 
    } 
    base64Image = 'data:image/jpeg;base64,' + window.btoa(binary); 
}); 

W końcu moja przeglądarka informuje mnie, że obraz jest uszkodzony lub obcinane. Spróbowałem więc stworzenie XMLHttpRequest używając overrideMimeType ('text/plain; charset = x-user-defined') i to działa:

var xhr_object = new XMLHttpRequest(); 
xhr_object.overrideMimeType('text/plain; charset=x-user-defined'); 
xhr_object.open('GET', '...', false); 
xhr_object.send(null); 
if(xhr_object.status == 200){ 
    var responseText = xhr_object.responseText; 
    var responseTextLen = responseText.length; 
    var binary = '' 
    for (var j = 0; j < responseTextLen; j+=1) { 
     binary += String.fromCharCode(responseText.charCodeAt(j) & 0xff) 
    } 
    base64Image = 'data:image/jpeg;base64,' + window.btoa(binary); 
} 

jaka jest różnica?

Answer 1

Wiem, że to nie jest odpowiedź, więc nie jestem pewien, czy warto ją opublikować. Jest podobny do tego, co robisz, ale w przeciwnym kierunku! Ale tutaj:

Publikuję ciąg danych obrazu z elementu canvas (canvas.toDataURL ("image/png")) na serwer (node ​​+ express), zapisując go jako png na serwerze, następnie wyświetla się ten obraz jako adres URL do interfejsu API innej firmy.

Oto oryginalny XMLHttpRequest miałem w angularjs regulatora:

var dataURL = encodeURIComponent(canvas.toDataURL("image/png")); 
var url = "/camera/" + name + "/"; 

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = response; 
xhr.open("POST", url, true); 
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xhr.send("image=" + dataURL); 

Tutaj jest przekształcona w służbie angularjs $ http:

var dataURL = encodeURIComponent(canvas.toDataURL("image/png")); 
var url = "/camera/" + name + "/"; 

var config = { 
    method: 'POST', 
    url: url, 
    data: $.param({ image: dataURL }), 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
}; 

$http(config); 

wyraźnej funkcji, aby zapisać obraz na serwerze:

app.post('/camera/:username', function (req) { 
    var username = req.params.username, 
    image = decodeURIComponent(req.body.image), 
    binaryData; 

    var base64Data = image.replace(/^data:image\/png;base64,/, ""); 
    base64Data += base64Data.replace('+', ' '); 
    binaryData = new Buffer(base64Data, 'base64').toString('binary'); 

    fs.writeFile("public/camera-images/" + username + ".png", binaryData, "binary"); 
}); 

Answer 2

Teraz AngularJS respektuje standard XHR (XMLHttpRequest) możesz użyć zwykłego, kanciastego JS $http w połączeniu z HTML FileReader.

Sztuką jest pobranie danych jako blobu, który przekazuje się czytelnikowi.

var url = 'http://'; // enter url here 
$http.get(url,{responseType: "blob"}). 
    success(function(data, status, headers, config) { 
     // encode data to base 64 url 
     fr = new FileReader(); 
     fr.onload = function(){ 
      // this variable holds your base64 image data URI (string) 
      // use readAsBinary() or readAsBinaryString() below to obtain other data types 
      console.log(fr.result); 
     }; 
     fr.readAsDataURL(data); 
    }). 
    error(function(data, status, headers, config) { 
     alert("The url could not be loaded...\n (network error? non-valid url? server offline? etc?)"); 
    });