बेस 64 में प्रतिक्रिया से बाइनरी छवि स्ट्रिंग कैसे करें?

Question

मैं अनुरोधित छवि को अपने आरईएसटी एपीआई से बेस 64 स्ट्रिंग में पार्स करना चाहता हूं।

सबसे पहले ... मैंने सोचा था कि, यह आसान हो सकता है, सिर्फ इस उद्देश्य के लिए window.btoa() समारोह का उपयोग करने के।

जब मैं अपने आवेदन के ऐसे हिस्से में यह करने के लिए प्रयास करें:

.done(function(response, position) { 
    var texture = new Image(); 
    texture.src = "data:image/png;base64," + window.btoa(response); 

मैं अगले त्रुटि मिल गया है: Uncaught InvalidCharacterError: 'विंडो' पर 'btoa' निष्पादित करने में विफल: स्ट्रिंग के लिए एन्कोडेड में लैटिन 1 रेंज के बाहर वर्ण शामिल हैं।

के रूप में मैं यहाँ पढ़ें: newlines in the response की वजह से javascript atob returning 'String contains an invalid character'

समस्या इसलिए होती है और यही कारण है window.btoa() में विफल रहा है। पाठ्यक्रम के किसी भी बाइनरी छवि प्रारूप में नई लाइनें होंगी ... लेकिन सुझाव के ऊपर दिए गए लिंक से उन पात्रों को हटाना/प्रतिस्थापित करना था - मेरे लिए एक बुरा सुझाव है, क्योंकि बाइनरी छवि से कुछ पात्रों को हटाने/बदलने के लिए दूषित हो जाओ

बेशक

, संभव विकल्पों एपीआई डिजाइन से संबंधित हैं: - अगर मैं मरम्मत नहीं होगा कुछ समारोह, जो छवि

को यूआरएल लौट जोड़ने के लिए - कुछ समारोह है, जो बेस 64 प्रतिनिधित्व लौट जोड़ने के लिए यह, मैं सर्वर से बेस 64 प्रतिनिधित्व वापस कर दूंगा, लेकिन मुझे ऐसा कोई तरीका पसंद नहीं है।

प्रतिक्रिया से हैंडलिंग बाइनरी छवि के साथ मेरी समस्या को हल करने का कोई तरीका मौजूद है, जैसा कि यह स्क्रीनशॉट के हिस्से में ऊपर दिखाया गया है, है ना?

Answer 1

बेस 64 छवि डेटा

<img src="data:image/png;base64,' + responce + '" />

Answer 2

इम स्ट्रिंग पर escape उपयोग करने के लिए इससे पहले कि आप कार्य करने के लिए पारित अनुमान लगा जैसे मेरे लिए काम किया है, API कॉल मैं अपने आप को परीक्षण नहीं कर सकते बिना।

परीक्षण

encodeURI("testñ$☺PNW¢=") 

रिटर्न

"test%C3%B1$%E2%98%BAPNW%C2%A2=" 

यह सिर्फ सभी पात्रों पलायन, यह स्ट्रिंग

परीक्षण

encodeURI("¶!┼Æê‼_ðÄÄ┘Ì+\+,o▬MBc§yþó÷ö") 

retur में सभी अवैध वर्ण से बचें चाहिए एनएस

"%C2%B6!%E2%94%BC%C3%86%C3%AA%E2%80%BC_%C3%B0%C3%84%C3%84%E2%94%98%C3%8C++,o%E2%96%ACMBc%C2%A7y%C3%BE%C3%B3%C3%B7%C3%B6" 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

Answer 3

मुद्दा आप का सामना कर रहे है कि प्रतिक्रिया एक यूनिकोड स्ट्रिंग माना जा रहा है।यूनिकोड स्ट्रिंग्स पर अनुभाग देखें: window.btoa

कई समाधान इस post

Answer 4

में की पेशकश कर रहे मुझे लगता है कि समस्या आप कम पड़ रहा है की बात यह है कि jQuery.ajaxnot देशी रूप का समर्थन नहीं करता XHR2 ब्लॉब/arraybuffer प्रकार जो अच्छी तरह से संभाल सकता है बाइनरी डेटा (Reading binary files using jQuery.ajax देखें)।

यदि आप xhr.responseType = 'arraybuffer' के साथ मूल XHR ऑब्जेक्ट का उपयोग करते हैं, तो प्रतिक्रिया सरणी पढ़ें और इसे बेस 64 में परिवर्तित करें, आपको वह चाहिए जो आप चाहते हैं।

// http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ 
 
function fetchBlob(uri, callback) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', uri, true); 
 
    xhr.responseType = 'arraybuffer'; 
 

 
    xhr.onload = function(e) { 
 
    if (this.status == 200) { 
 
     var blob = this.response; 
 
     if (callback) { 
 
     callback(blob); 
 
     } 
 
    } 
 
    }; 
 
    xhr.send(); 
 
}; 
 

 
fetchBlob('https://i.imgur.com/uUGeiSFb.jpg', function(blob) { 
 
    // Array buffer to Base64: 
 
    var str = btoa(String.fromCharCode.apply(null, new Uint8Array(blob))); 
 

 
    console.log(str); 
 
    // Or: '<img src="data:image/jpeg;base64,' + str + '">' 
 
});

https://jsfiddle.net/oy1pk8r3/2/

बेस 64 का उत्पादन इनकोडिंग कंसोल आउटपुट: /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQIBAQICAgICAgICAw.....

Answer 5

बजाय _arrayBufferToBase64 साथ ब्लॉब के माध्यम से पाशन (

यहाँ एक समाधान है कि मेरे लिए काम करता है), उपयोग करें लागू() रूपांतरण करने के लिए, यह 30 बार अपने ब्राउज़र में तेजी से और अधिक संक्षिप्त है

// http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ 
 
function fetchBlob(uri, callback) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', uri, true); 
 
    xhr.responseType = 'arraybuffer'; 
 

 
    xhr.onload = function(e) { 
 
    if (this.status == 200) { 
 
     var blob = this.response; 
 
     if (callback) { 
 
     callback(blob); 
 
     } 
 
    } 
 
    }; 
 
    xhr.send(); 
 
}; 
 

 
fetchBlob('https://i.imgur.com/uUGeiSFb.jpg', function(blob) { 
 
    var str = String.fromCharCode.apply(null, new Uint8Array(blob)); 
 
    console.log(str); 
 
    // the base64 data: image is then 
 
    // '<img src="data:image/jpeg;base64,' + btoa(str) + '" />' \t 
 
});