Angular JS - richiesta per ottenere un'immagine

Question

Mi piacerebbe visualizzare un'immagine jpeg sull'interfaccia utente. Per questo, chiedo il mio servizio (metodo GET) e poi mi sono convertito a basare 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); 
}); 

Alla fine, il mio browser mi dice che l'immagine è danneggiato o troncato. Così ho provato la creazione di un XMLHttpRequest utilizzando un overrideMimeType ('text/plain; charset = x-user-definito') e funziona:

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

qual è la differenza?

Answer 1

So che questa non è una risposta, quindi non sono sicuro che valga la pena di postare. È simile a quello che stai facendo, ma nella direzione opposta! Ma ecco:

Sto postando una stringa di dati immagine da un elemento canvas (canvas.toDataURL ("image/png")) al server (nodo + express), salvandolo come png sul server, quindi servendo quell'immagine come URL per un'API di terze parti.

Ecco il XMLHttpRequest originale che avevo in un controller angular.js:

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

Qui viene convertito in un servizio angular.js $ 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); 

Funzione Express per salvare l'immagine sul server:

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

Ora AngularJS rispetta lo standard XHR (XMLHttpRequest) ed è possibile utilizzare il semplice JS $http angolare combinato con l'HTML FileReader.

Il trucco è quello di ottenere i dati come un blob che si passa al lettore.

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?)"); 
    });