http - कोणीय जेएस-एक छवि प्राप्त करने के लिए अनुरोध करें




angularjs get (2)

मुझे पता है कि यह कोई जवाब नहीं है इसलिए मुझे यकीन नहीं है कि यह पोस्टिंग के लायक भी है। यह आप के जैसा है लेकिन विपरीत दिशा में है! लेकिन यहाँ जाता है:

मैं सर्वर पर एक कैनवास तत्व (कैनवास। टूडाटाURL ("छवि / पीएनजी")) से एक छवि डेटा स्ट्रिंग पोस्ट कर रहा हूं (सर्वर / नोड + एक्सप्रेस), इसे सर्वर पर पीएनजी के रूप में सहेज रहा है, फिर उस छवि को यूआरएल के रूप में सेवा के रूप में एक तृतीय पक्ष एपीआई

यहाँ मूल XMLHttpRequest मैं एक 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);

यहां यह एक 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);

सर्वर पर छवि को बचाने के लिए कार्य व्यक्त करें:

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

मैं UI पर एक जेपीईजी छवि प्रदर्शित करना चाहूंगा इसके लिए, मैं अपनी सेवा (जीईटी विधि) का अनुरोध करता हूं और फिर मैं बेस 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);
});  

अंत में, मेरा ब्राउज़र मुझसे कहता है कि छवि दूषित या छोटा है इसलिए मैंने ओवरराइड माइमटाइप ('पाठ / सादा; वर्णसेट = एक्स-उपयोगकर्ता-परिभाषित') का उपयोग करके एक XMLHttpRequest बनाने का प्रयास किया और यह काम करता है:

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

अंतर क्या है?


अब AngularJS XHR (XMLHttpRequest) मानक का सम्मान करता है और आप सादे एन्जल जेएस $http एचटीएमएल HTML FileReader के साथ संयुक्त का उपयोग कर सकते हैं।

इस चाल को डेटा को एक ब्लॉब के रूप में प्राप्त करना है जो आप पाठक को पास करते हैं।

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




mime-types