How to Display Binary Data as Image - Extjs 4

How to display binary data as image - extjs 4

Need to convert it in base64.

JS have btoa() function for it.

For example:

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

But i think what your binary data in pastebin is invalid - the jpeg data must be ended on 'ffd9'.

Update:

Need to write simple hex to base64 converter:

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

And use it:

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

See working example with your hex data on jsfiddle

extjs 4 : display image from Mysql blob value

Need to adding in model methods (and use converter from my answer of you another question):

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

Example on jsfiddle with your image & my wife photo.

How can you set the source of a image tag to binary image data, Nothing I've seen is working for me

Use the tag this way:

<img src="data:image/gif;base64,xxxxxxxxxxxxx...">

where xxxx above is image base64 image code.

OR

<img src="data:image/jpeg;base64, <?=base64_encode($Data)?>">

here $data is your binary image

it just solution for your question. see if its work or not.

extjs 4: list view select image id and display the image on other panel

//===========================LIST VIEW===============================
    Ext.define('ImageModel', {
        extend: 'Ext.data.Model',
        fields: ['PicID', 'PicUploadedDateTime','PicData']
    });

    var ImgStore = Ext.create('Ext.data.JsonStore', {
        model: 'ImageModel',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'get-image.php',
            baseParams: {  //here you can define params you want to be sent on each request from this store
                        mainid: 'value1',
                        startdate: 'value2',
                        enddate: 'value3'
                        },
            reader: {
                type: 'json',
                root: 'images'
            }
        }
    });

    var listView = Ext.create('Ext.grid.Panel', {
        region: 'west',
        id : 'imagelist',
        title: 'Select Image',
        width: 200,
        split: true,
        collapsible: true,
        floatable: false,
        title:'Select Image',
        store: ImgStore,
        multiSelect: false,
        viewConfig: {
            emptyText: 'No images to display'
        },

        columns: [
            {
            text: 'Date Time Uploaded',
            //xtype: 'datecolumn',
            //format: 'Y-m-d H:i:s',
            flex: 65,
            width: 100,
            dataIndex: 'PicUploadedDateTime'
        }]
    });

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

    listView.on('selectionchange', function(view, nodes){
        /*
        var nodeIdDisplay = "";
        for(var i = 0; i < nodes.length; i++)
        {
            if(nodeIdDisplay.length > 0)
                nodeIdDisplay += ",";
            nodeIdDisplay += nodes[i].get("PicID");
        }
        */
        if (nodes[0].get("PicID") > 0){
            //alert(nodes[0].get("PicData"));
            image=Ext.getCmp('displayimage');
            image.setSrc("data:image/jpeg;base64,"+hexToBase64(nodes[0].get("PicData")));
        //console.log(nodes[0].get("PicData"));
        }
    });

this code method is post to the get-image.php,and get all the image in store and then,
list view on select change event get the image id and display the image on type : 'image' component

Convert image into binary image in sencha touch

I hope you are asking image data transfer to server.
Image data converted into Base64 format first then send bas64 data through AJAX Request.

 Ext.Ajax.request({
    method: 'POST',
    url: 'url',
    jsonData: { fileName:"ImgfileName", fileData: imageDataInbas64},
    success: function (response, operation) {
        //success..
    },
    failure: function (response, operation) {
        //failure...
    }
});       

Express.js: respond with image file instead of binary file?

I think the distinction you are drawing between an "image file" and an "image binary file" is misleading you. All bitmap image files are encoded in binary (or, on rare occasions, base64), so I don't think that gets to the root of your problem.

res.sendFile should work just fine. The problem is in your client-side JavaScript.

To display image data in the browser, you will ultimately have to use canvas or img HTML elements. The easiest way to asynchronously load an image in your app would be to update the src attribute of an img element that already exists in the DOM to the address of the image and let the browser handle the loading for you.

However, if you want to manipulate the image data prior to loading it to an img or canvas element, I would recommend using the FileReader API, as opposed to manually parsing the binary.

The key step with this approach is to set the response data type to "blob" when you make your get request

The blob data type references the binary image file, but allows you to use the browser's built-in File interface.

The code below requests an image file as a blob and then converts the blob into a base64 encoded data url that you can use as the src attribute of an img element or load to a canvas.

var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.onload = function(event) {
fileToDataUrl(event.target.response, function(result){
            console.log(result);
    });
};
xhr.open('GET', "https://i.imgur.com/7VhSUEH.jpg", true);
xhr.send();

function fileToDataUrl(fileObj, callback) {
    var reader = new FileReader();
    reader.addEventListener("load", function() {
    console.log("result")
        callback(reader.result);
    }, false);
    reader.readAsDataURL(fileObj);
}

---

Related Topics