Showing posts with label showing image on html page from binary data. Show all posts
Showing posts with label showing image on html page from binary data. Show all posts

Monday, 21 May 2012

Showing Image on Web-Page from binary data

Showing Image on Web-Page from binary data:

in a project i had to show image on a Webpage, that image comes from a Data Base. Now i am posting a generic(HTML/JavaScript) code to implement that:

Step 1: Create a Div in your page like:
<div id="picture"/>

Step 2: Write following JavaScript at the bottom section of the Page:
<script>
function displayBinaryImage(binaryImageData){
var imageHtml ="";
imageHtml+="<table><tr><td>";
imageHtml += "<img width=\"200px\" height=\"250px\" src=\"data:image/png;base64," + binaryImageData.replace(/^\s+|\s+$/g, '')+  "\"/>";
imageHtml+="</td></tr></table>";
document.getElementById("picture").innerimageHtml = imageHtml;
}  
displayBinaryImage('<?= $salesRepTechs->image?>');
</script>