javascript - बाइनरी डेटा को छवि के रूप में कैसे प्रदर्शित करना है-extjs 4




ajax extjs4 (3)

इसे base64 में बदलने की आवश्यकता है।

जे एस के लिए btoa () फ़ंक्शन है।

उदाहरण के लिए:

var img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your-binary-data');
document.body.appendChild(img);

लेकिन मुझे लगता है कि पेस्टबिन में आपकी बाइनरी डेटा अमान्य है - जेपीजी डेटा 'एफएफडी 9' पर समाप्त होना चाहिए।

अद्यतन करें:

आधार64 कनवर्टर के लिए सरल हेक्स लिखने की आवश्यकता है:

function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

और इसका प्रयोग करें:

img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data');

Jsfiddle पर अपने हेक्स डेटा के साथ काम उदाहरण देखें

यहां एक वैध। जेपीईजी छवि के लिए बाइनरी है।
http://pastebin.ca/raw/2314500

मैंने इस बाइनरी डेटा को एक छवि में सहेजने के लिए पायथन का उपयोग करने का प्रयास किया है।

मैं इस डेटा को एक दृश्यमान में कैसे रूपांतरित कर सकता हूं।

मैंने यह कोशिश की, लेकिन यह काम नहीं करता है।

data:image/jpeg;base64,+ binary data

डेटा यूआरआई प्रारूप है:

data:<headers>;<encoding>,<data>

इसलिए, आपको केवल "डेटा: छवि / जेपीजी ;," स्ट्रिंग पर अपने डेटा को संलग्न करने की आवश्यकता है:

var your_binary_data = document.body.innerText.replace(/(..)/gim,'%$1'); // parse text data to URI format

window.open('data:image/jpeg;,'+your_binary_data);

एक्स्टजे में, आप उपयोग कर सकते हैं

xtype: 'छवि'

एक छवि रेंडर करने के लिए

यहां एक बेकन है जो बाह्य संस्करणों के साथ द्विआधारी डेटा का प्रतिपादन दिखा रहा है।

atob -> आस्की को बाइनरी में धर्मान्तरित करता है

btoa -> द्विआधारी से आस्की के लिए धर्मान्तरित

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var srcBase64 = "data:image/jpeg;base64," + btoa(atob("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8H8hYDwAFegHS8+X7mgAAAABJRU5ErkJggg=="));

        Ext.create("Ext.panel.Panel", {
            title: "Test",
            renderTo: Ext.getBody(),
            height: 400,
            items: [{
                xtype: 'image',
                width: 100,
                height: 100,
                src: srcBase64
            }]
        })
    }
});

https://fiddle.sencha.com/#view/editor&fiddle/28h0





extjs4