Convert an image to base64 without using HTML5 Canvas

Question

First, a little background:

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.

I have an ASP.NET MVC application that uses embedded WinForm UserControls. These control provide "ink-over" support to TabletPCs through the Microsoft.Ink library. They are an unfortunate necessity due to an IE8 corporate standard; otherwise, HTML5 Canvas would be the solution.

Anyway, an image URL is passed to the InkPicture control through a <PARAM> .

<object VIEWASEXT="true" classid="MyInkControl.dll#MyInkControl.MyInkControl" 
        id="myImage"  name="myImage" runat="server">
    <PARAM name="ImageUrl" value="http://some-website/Content/images/myImage.png" />
</object>

The respective property in the UserControl takes that URL, calls a method that performs an HttpWebRequest , and the returned image is placed in the InkPicture .

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;
    }

Problem

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 Image img = new Bitmap(url); in the UserControl does not work in this situation because of FileIO Permission issues (Full trust or not, I have been unsuccessful in eliminating that issue).

---

Initial Solution

Even though using canvas is not a current option, I decided to test a solution using it. I would load each image in javascript, then use canvas and toDataUrl() to get the base64 data. Then, instead of passing the URL to the UserControl and have it do all the leg work, I pass the base64 data as a <PARAM> instead. Then it quickly converts that data back to the image.

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.

---

Here are some additional requirements/restrictions:

• The solution cannot have external dependencies (ie $.getImageData).
• It needs to be 100% encapsulated so it can be portable.
• The source and quantity of images are variable, and they must be in URL format (base64 data up front is not an option).

I hope I've provided sufficient information and I appreciate any direction you're able to give.

Thanks.

Answer 1

You can use any of the FlashCanvas, fxCanvas or excanvas libraries, which simulate canvas using Flash or VML in old internet explorer versions. I believe all of these provide the toDataURL method from the Canvas API, allowing you to get an encoded representation of your image.

After extensive digging around (I'm in the same fix) I believe this is the only solution, short of writing a PHP script that you can send the image to. The problem with that of course is that there isn't a way to send images to the PHP script unless any of these three conditions is true:

• The browser supports typed arrays ( Uint8Array )
• The browser supports sendAsBinary
• The image is being uploaded by someone via a form (in which case it can be sent to a PHP script that responds with the base 64 encoding)