How to convert byte array to image in javascript

Question

I am developing a phonegap application here i got a byte array of a image form server and i want to display that byte array to image in html using javascript so can you help me to convert byte array to image format.

http://stackoverflow.com/questions/9463981/displaying-byte-array-as-image-using-javascript have alook on this — , Jan 23 '14 at 06:30
check the link :http://www.codeproject.com/Questions/578560/howplustoplusconvertplusbyteplusarrayplustoplusima — Kamlesh Arya, Jan 23 '14 at 06:30

score 14 · Accepted Answer · answered Jan 23 '14 at 07:38

14

If you have the byte array first you convert it to Base64String and then you place it on an img tag like that (for png image)

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

answered Jan 23 '14 at 07:38

Suhas Gosavi

2,170
19
40

yes , you saved my time. I was looking for more complex solutions like etc. Nothing worked and simple as this.Many thanks. – Buminda Mar 23 '14 at 10:33
@Buminda Yah no need of thanks. If you liked it just upvote the answer. – Suhas Gosavi Mar 23 '14 at 11:10
@Buminda.. how did you convert byte array into base64 in javascript – Prannoy Mittal Dec 13 '16 at 15:40
@PrannoyMittal use btoa(..) https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding – darkace Jan 19 '17 at 21:30

score 2 · Answer 2 · answered Jan 23 '14 at 06:32

Example code : Source

<!DOCTYPE html>
<html>
<head>
<script>
function newEl(tag){return document.createElement(tag);}

window.addEventListener('load', mInit, false);

// rbgData - 3 bytes per pixel - alpha-channel data not used (or valid)
//
function createImageFromRGBdata(rgbData, width, height)
{
    var mCanvas = newEl('canvas');
    mCanvas.width = width;
    mCanvas.height = height;

    var mContext = mCanvas.getContext('2d');
    var mImgData = mContext.createImageData(width, height);

    var srcIndex=0, dstIndex=0, curPixelNum=0;

    for (curPixelNum=0; curPixelNum<width*height;  curPixelNum++)
    {
        mImgData.data[dstIndex] = rgbData[srcIndex];        // r
        mImgData.data[dstIndex+1] = rgbData[srcIndex+1];    // g
        mImgData.data[dstIndex+2] = rgbData[srcIndex+2];    // b
        mImgData.data[dstIndex+3] = 255; // 255 = 0xFF - constant alpha, 100% opaque
        srcIndex += 3;
        dstIndex += 4;
    }
    mContext.putImageData(mImgData, 0, 0);
    return mCanvas;
}


var rgbData = new Array(
0xff,0xff,0xff,  0xff,0xff,0xff,  0xff,0xff,0xff,  0xff,0xff,0xff,// white,white,white, white
0xff,0xff,0xff,  0xff,0x00,0x00,  0x00,0xff,0x00,  0xff,0xff,0xff,// white,  red,green, white
0xff,0xff,0xff,  0x00,0x00,0xff,  0xff,0xff,0x00,  0xff,0xff,0xff,// white, blue,yellow,white
0xff,0xff,0xff,  0xff,0xff,0xff,  0xff,0xff,0xff,  0xff,0xff,0xff // white,white,white, white
);

function mInit()
{
    // 1. - append data as a canvas element
    var mCanvas = createImageFromRGBdata(rgbData, 4, 4);
    mCanvas.setAttribute('style', "width:64px; height:64px; border:solid 1px black"); // make it large enough to be visible
    document.body.appendChild( mCanvas );

    // 2 - append data as a (saveable) image
    var mImg = newEl("img");
    var imgDataUrl = mCanvas.toDataURL();   // make a base64 string of the image data (the array above)
    mImg.src = imgDataUrl;
    mImg.setAttribute('style', "width:64px; height:64px; border:solid 1px black"); // make it large enough to be visible
    document.body.appendChild(mImg);
}

</script>
<style>
</style>
</head>
<body>
</body>
</html>

How to convert byte array to image in javascript

2 Answers2