How can I show an image in webBrowser control directly from memory?

Mohammad Afrashteh picture Mohammad Afrashteh · Nov 21, 2011 · Viewed 7.9k times · Source

How can I show an image in webBrowser control directly from memory instead of hard disk? When I use RAM Disk software to create a virtual drive, it is possible to address an image source to load it like this: img src = "Z:/image.jpg" that Z is a RAM Disk drive. Is it possible to do that in .NET programmaticly? or use MemoryStream to do that?

I would really appreciate some suggestions about this.

Answer

rcarrillopadron picture rcarrillopadron · Dec 20, 2011

You can encode the image in base64. For example

<img src="data:image/gif;base64,MyImageDataEncodedInBase64=" alt="My Image data in base 64" />

Here is a full example of how you can accomplish this:

using System;
using System.IO;
using System.Runtime.InteropServices;
using System.Windows.Forms;

namespace ImageEncodedInBase64InAWebBrowser
{
    [ComVisible(true)]
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            string url = Directory.GetCurrentDirectory() + "\\page.html";
            webBrowser1.Url = new Uri(url);
            webBrowser1.ObjectForScripting = this;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            string imageInBase64 = ReadImageInBase64();
            webBrowser1.Document.InvokeScript("setImageData", new[] { imageInBase64 });

        }

        private string ReadImageInBase64()
        {
            string imagePath = Directory.GetCurrentDirectory() + "\\opensource.png";
            using (var fs = new FileStream(imagePath, FileMode.Open, FileAccess.Read))
            {
                var buffer = new byte[fs.Length];
                fs.Read(buffer, 0, (int)fs.Length);
                return Convert.ToBase64String(buffer);
            }
        }
    }
}

And this Javascript code:

function setImageData(imageBase64) {
    var myImg = document.getElementById("myImg");
    myImg.src = "data:image/png;base64," + imageBase64;
}