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




ajax extjs4 (5)

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

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

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

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

data:image/jpeg;base64,+ binary data

Answers

फ्रंट एंड जावास्क्रिप्ट / एचटीएमएल में, आप एक बाइनरी फ़ाइल को एक छवि के रूप में लोड कर सकते हैं, आपको बेस 64 में कनवर्ट करने की आवश्यकता नहीं है:

<img src="http://engci.nabisco.com/artifactory/repo/folder/my-image">

मेरी-छवि एक बाइनरी छवि फ़ाइल है यह सिर्फ ठीक लगाएगा।


इसे 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 पर अपने हेक्स डेटा के साथ काम उदाहरण देखें


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

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


यहां चर्चा की गई कई विशेषताओं के साथ-साथ बेहतर संगतता के लिए एक अमूर्त पुस्तकालय का उपयोग करने की सिफारिश करें। बहुत सारे विकल्प:





javascript ajax extjs extjs4