web-dev-qa-db-fra.com

Comment afficher des données binaires sous forme d'image - Extjs 4

Voici le binaire pour une image .JPEG valide.
http://Pastebin.ca/raw/2314500

J'ai essayé d'utiliser Python pour enregistrer ces données binaires dans une image. 

Comment puis-je convertir ces données en une image .JPEG visible avec Extjs 4?

J'ai essayé ça, mais ça ne marche pas.

data:image/jpeg;base64,+ binary data
javascriptajaxextjsextjs4
24
user2040602

Besoin de le convertir en base64.

JS ont la fonction btoa () pour cela.

Par exemple:

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

Mais je pense que ce que vos données binaires dans Pastebin sont invalides - les données JPEG doivent être terminées sur 'ffd9'.

Mettre à jour:

Besoin d'écrire un convertisseur hexadécimal simple en base64:

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

Et utilisez-le: 

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

Voir exemple de travail avec vos données hex sur jsfiddle

52
Vlad

Le format de l'URI des données est: 

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

Il vous suffit donc d’ajouter vos données à la chaîne "data: image/jpeg ;,":

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

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

Dans ExtJs, vous pouvez utiliser

xtype: 'image'

rendre une image.

Voici un violon montrant le rendu des données binaires avec extjs.

atob -> convertit ascii en binaire

btoa -> convertit le binaire en ascii

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

0
Saurabh Nemade