在不使用base64画布的情况下将图像转换为HTML5

Question

首先，一个小背景：

我对本序言冗长的性质表示歉意；然而，它可能有助于提供一个与问题性质无关的替代解决方案。

我有一个ASP.NET MVC应用程序，它使用嵌入式WinForm UserControls。这些控件通过Microsoft.Ink库向TabletPC提供“墨迹覆盖”支持。由于IE8公司标准，它们是不幸的必需品；否则，HTML5画布将是解决方案。

无论如何，图像URL通过InkPicture传递给<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>

UserControl中的相应属性接受该URL，调用执行HttpWebRequest的方法，返回的图像被放置在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;
    }

问题

这是可行的，但在这个过程中有大量的开销，严重延迟了我的网页的加载(15张图片拍摄了15 seconds...not理想)。在Image img = new Bitmap(url);中执行UserControl无法在这种情况下工作，因为存在FileIO权限问题(不管是否完全信任，我都未能消除该问题)。

初始解

尽管使用canvas不是当前的选项，我还是决定使用它来测试解决方案。我将在javascript中加载每个图像，然后使用canvas和toDataUrl()获取base64数据。然后，我将base64数据作为<PARAM>传递，而不是将URL传递给<PARAM>并让它完成所有的工作。然后，它会快速地将数据转换回图像。

15张图片的15秒现在还不到3秒。于是，我开始寻找一个在IE7/8中工作的映像->base64 64解决方案。

以下是一些额外的要求/限制：

• 解决方案不能有外部依赖项(即$.getImageData)。
• 它需要100%封装，以便可以移植。
• 图像的来源和数量是可变的，它们必须是URL格式的(前面的base64数据不是一个选项)。

我希望我已经提供了足够的信息，我很感激你能给出的任何方向。

谢谢。

Answer 1

您可以使用任何FlashCanvas、fxCanvas或excanvas库，它们在旧的internet版本中使用Flash或VML模拟画布。我相信所有这些都提供了Canvas中的toDataURL方法，允许您获得图像的编码表示。

经过广泛的研究(我在同一个修复程序中)，我相信这是唯一的解决方案，除了编写一个PHP脚本之外，您可以将图像发送到。当然，问题在于，除非这三种条件中的任何一种条件为真，否则无法将图像发送到PHP脚本：

• 浏览器支持类型化数组(Uint8Array)
• 浏览器支持sendAsBinary
• 图像是由某人通过表单上传的(在这种情况下，它可以发送到一个PHP脚本，该脚本使用基本64编码进行响应)