Monday, January 16, 2012

How to solve the problem that you can't display a imge file from IsolatedStorage to web browser

If you have a experience that you try to display a image from IsolatedStorage to web browser as img tag, you notice you can't make it.

For instance, a image file (test.jpg) doesn't display in like html source.
 string htmlSource = @"<?xml version='1.0' encoding='utf-8'?>  
             <html>  
             <head>  
               <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />  
             </head>  
             <body>  
               <img src='isostore:/Shared/ShellContent/test.jpg'>  
             </body>  
             </html>  
               ";  
 this.webBrowser1.NavigateToString(htmlSource);  


So, if you want to display a image file from IsolatedStorage, you need to generate Base64 String object from the image file and use Javascript to display a image file in html source code.


The sample code is like this.

  • First, generate Base64 String object from Image object.
 public string ImageToBase64(Image image, System.Drawing.Imaging.ImageFormat format)  
 {  
  using (MemoryStream ms = new MemoryStream())  
  {  
   // Convert Image to byte[]  
   image.Save(ms, format);  
   byte[] imageBytes = ms.ToArray();  
   // Convert byte[] to Base64 String  
   string base64String = Convert.ToBase64String(imageBytes);  
   return base64String;  
  }  
 }  

  • Second, display a image using Javascript.
string base64String = ImageToBase64(image, format);  
 string htmlSource = @"<html>  
             <head>  
             </head>  
             <body>  
               <img id='icon_here'>  
               <script>  
                 var data = 'data:image/gif;base64," + base64String + @"';  
                 var icon_elem = document.getElementById('icon_here');  
                 icon_elem.src = data;  
               </script>  
             </body>  
             </html>";  
 this.webBrowser1.NavigateToString(htmlSource);  


You can display a image like this.

























If you have a great idea about the problem, please reply comment.

  • Edit. 2011/01/16
I got a comment of great idea about the problem. You don't need to use Javascript. Simply, add BASE64 string to src attribute.
 string source = @"<html>  
           <head>  
           </head>  
           <body>  
             <img src='data:image/gif;base64," + base64String + @"'>  
           </body>  
          </html>";  
 this.webBrowser1.NavigateToString(source);  

6 comments:

  1. You don't need the javascript to display a base64 encoded image. Use the Data Url syntax
    <img src="data:image/png;base64,iVBORw...

    See http://de.wikipedia.org/wiki/Data-URL#HTML

    ReplyDelete
  2. I really appreciate your comment. I edit this post.

    ReplyDelete
  3. I have no words for this great post such a awe-some information i got gathered. Thanks to Author.

    ReplyDelete
  4. i've problem with image source file name it has strange encoding

    ReplyDelete
  5. Hi there, any way to use navigateToString method in desktop app c# ?

    thanks in advance

    ReplyDelete