title: Convert an image to base64 without using HTML5 Canvas
body: <p><strong>First, a little background:</strong></p>
  
  <p>I apologize ahead of time for the long-winded nature of this preface; however, it may assist in providing an alternate solution that is not specific to the nature of the question.</p>
  
  <p>I have an ASP.NET MVC application that uses embedded WinForm UserControls.  These control provide "ink-over" support to TabletPCs through the <code>Microsoft.Ink</code> library.  They are an unfortunate necessity due to an IE8 corporate standard; otherwise, HTML5 Canvas would be the solution.</p>
  
  <p>Anyway, an image URL is passed to the <code>InkPicture</code> control through a <code>&lt;PARAM&gt;</code>.  </p>
  
  <pre><code>&lt;object VIEWASEXT="true" classid="MyInkControl.dll#MyInkControl.MyInkControl" 
          id="myImage"  name="myImage" runat="server"&gt;
      &lt;PARAM name="ImageUrl" value="http://some-website/Content/images/myImage.png" /&gt;
  &lt;/object&gt;
  </code></pre>
  
  <p>The respective property in the <code>UserControl</code> takes that URL, calls a method that performs an <code>HttpWebRequest</code>, and the returned image is placed in the <code>InkPicture</code>.</p>
  
  <pre><code>public Image DownloadImage(string url)
      {
          Image _tmpImage = null;
  
          try
          {
              // Open a connection
              HttpWebRequest _HttpWebRequest = (HttpWebRequest)HttpWebRequest.Create(url);
              _HttpWebRequest.AllowWriteStreamBuffering = true;
  
              // use the default credentials
              _HttpWebRequest.Credentials = CredentialCache.DefaultCredentials;
  
              // Request response:
              System.Net.WebResponse _WebResponse = _HttpWebRequest.GetResponse();
  
              // Open data stream:
              System.IO.Stream _WebStream = _WebResponse.GetResponseStream();
  
              // convert webstream to image
              _tmpImage = Image.FromStream(_WebStream);
  
              // Cleanup
              _WebResponse.Close();
          }
          catch (Exception ex)
          {
              // Error
              throw ex;
          }
  
          return _tmpImage;
      }
  </code></pre>
  
  <p><em><strong>Problem</em></strong></p>
  
  <p>This works, but there's a lot of overhead in this process that significantly delays my webpage from loading (15 images taking 15 seconds...not ideal).  Doing <code>Image img = new Bitmap(url);</code> in the <code>UserControl</code> does not work in this situation because of FileIO Permission issues (Full trust or not, I have been unsuccessful in eliminating that issue).</p>
  
  <hr>
  
  <p><em><strong>Initial Solution</em></strong></p>
  
  <p>Even though using <code>canvas</code> is not a current option, I decided to test a solution using it.  I would load each image in javascript, then use <code>canvas</code> and <code>toDataUrl()</code> to get the base64 data.  Then, instead of passing the URL to the <code>UserControl</code> and have it do all the leg work, I pass the base64 data as a <code>&lt;PARAM&gt;</code> instead.  Then it quickly converts that data back to the image.</p>
  
  <p>That 15 seconds for 15 images is now less than 3 seconds.  Thus began my search for a image->base64 solution that worked in IE7/8.</p>
  
  <hr>
  
  <p>Here are some additional requirements/restrictions:</p>
  
  <ul>
  <li>The solution cannot have external dependencies (i.e. $.getImageData).  </li>
  <li>It needs to be 100% encapsulated so it can be portable.</li>
  <li>The source and quantity of images are variable, and they must be in URL format (base64 data up front is not an option).</li>
  </ul>
  
  <p>I hope I've provided sufficient information and I appreciate any direction you're able to give.</p>
  
  <p>Thanks.</p>