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.
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);
