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.
2
-
stackoverflow.com/questions/9463981/… have alook on thisuser3110424– user31104242014-01-23 06:30:03 +00:00Commented Jan 23, 2014 at 6:30
-
check the link :codeproject.com/Questions/578560/…Kamlesh Meghwal– Kamlesh Meghwal2014-01-23 06:30:39 +00:00Commented Jan 23, 2014 at 6:30
Add a comment
|
2 Answers
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">
4 Comments
Buminda
yes , you saved my time. I was looking for more complex solutions like <p:graphicImage> etc. Nothing worked and simple as this.Many thanks.
Suhas Gosavi
@Buminda Yah no need of thanks. If you liked it just upvote the answer.
Prannoy Mittal
@Buminda.. how did you convert byte array into base64 in javascript
darkace
@PrannoyMittal use btoa(..) developer.mozilla.org/en/docs/Web/API/WindowBase64/…
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>
