पीएनजी बाइनरी डेटा को एक आईएमजी टैग में कैसे डालें और इसे एक छवि के रूप में प्रदर्शित करें?

Question

मैं इस

 $.ajax({ 
      type: "GET", 
      url: 'template/bump1/purse.png', 
      datatype:"image/png", 
      success: function (data) { 


       var reader = new FileReader(); 

       reader.onload = function (e) { 
        var img = document.getElementById("CaptchaImg"); 
        img.src = e.target.result; 
       }; 
       reader.readAsDataURL(data); 


       //$('#CaptchaImg').attr('src', data); 
      } 
     }); 

एक छवि डाउनलोड करने के लिए उपयोग कर रहा हूँ, और यह बाइनरी में बाहर आता है, इस

Node.js की तरह लग रही

     WriteHeaderMode('image/png', res, 200); 
         res.end(data, 'binary'); 

के रूप में यह लौटा रहा है

लेकिन अब, मैं इसे एक छवि टैग में कैसे डालूं और इसे एक छवि के रूप में दिखाऊं। नोट: मैं बेस 64 एन्कोडिंग के रूप में डेटा वापस करना चाहता हूं, इसे बाइनरी होना चाहिए। हालांकि, बाइनरी को क्लाइंट साइड पर बेस 64 में कनवर्ट करने के साथ ठीक है।

जब मैं इसे readAsDataURL पर पास करता हूं, तो यह TypeError अपवाद कहता है।

धन्यवाद

संपादित

   var img = document.getElementById("CaptchaImg"); 

        var reader = new FileReader(); 

        reader.onload = function(e) { 
         //img.src = e.target.result; 
         $("body").html(e.target.result); 
        }; 

        reader.readAsDataURL(new Blob([data])); 

इस यह एक बेस 64 एन्कोडिंग, जो data:application/octet-stream;base64, के रूप में शुरू होता है, लेकिन एक छवि प्रदर्शित नहीं करता है में परिवर्तित करने लगता है ...

Answer 1

बजाय new Blob(data, {type : 'image/png'}) उपयोग करने का प्रयास new Blob([data])

यह सुनिश्चित करेगा कि ब्लॉब का मीडिया प्रकार एक पीएनजी है।

स्रोत: https://developer.mozilla.org/en-US/docs/Web/API/Blob

Answer 2

jQuery अजाक्स द्विआधारी प्रतिक्रियाओं का समर्थन नहीं करता (okay now it does), एक चाल overrideMimeType का उपयोग करता है है ('पाठ/सादे; charset = एक्स उपयोगकर्ता परिभाषित') एक के रूप में प्रत्येक बाइट वापस जाने के लिए प्रतिक्रिया स्ट्रिंग में वर्ण और फिर डेटा के बाइट सरणी बनाने के लिए प्रतिक्रिया के माध्यम से लूप करने के लिए।

हालांकि नंगे नग्न XMLHttpRequest के साथ इस responseType संपत्ति के उपयोग के साथ आसानी से किया जा सकता है।

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function(){ 
    if (this.readyState == 4 && this.status == 200){ 
     var img = document.getElementById("CaptchaImg"); 
     var url = window.URL || window.webkitURL; 
     img.src = url.createObjectURL(this.response); 
    } 
} 
xhr.open('GET', 'template/bump1/purse.png'); 
xhr.responseType = 'blob'; 
xhr.send(); 

Answer 3

मूसा के जवाब के लिए एक महान समाधान है, मैं कोणीय में कुछ इसी तरह से लागू किया और एक स्ट्रिंग अब और अच्छा काम करता है, जब आप को परिभाषित responseType = 'blob' आपकी प्रतिक्रिया नहीं होगा, यह एक ब्लॉब प्रकार वस्तु हो जाएगा। मुझे हेडर ऑब्जेक्ट में अतिरिक्त पैरामीटर जोड़ने की आवश्यकता है (सुनिश्चित नहीं है कि यह jQuery में आवश्यक है)। headers: {'Content-Type': "image/png"}, मेरे पूर्ण अनुरोध वस्तु:

var request = { 
      url: "_/get_image_/get", 
      method:"GET", 
      headers: {'Content-Type': "image/png"}, 
      responseType: 'blob' 
     }