javascript - 不使用 HTML5 Canvas 将图像转换为 base64

Question

首先，介绍一下背景:

对于这篇冗长的前言，我提前表示歉意；但是，它可能有助于提供不特定于问题性质的替代解决方案。

我有一个使用嵌入式 WinForm 用户控件的 ASP.NET MVC 应用程序。这些控件通过 Microsoft.Ink 为 TabletPC 提供“墨水溢出”支持。图书馆。由于 IE8 企业标准，它们是一个不幸的必需品；否则，HTML5 Canvas 就是解决方案。

无论如何，图像 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 秒......不理想)。做Image img = new Bitmap(url);在UserControl由于文件 IO 权限问题(是否完全信任，我未能成功消除该问题)，在这种情况下不起作用。

---

初步解决方案

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

15 张图片的 15 秒现在不到 3 秒。因此我开始寻找在 IE7/8 中工作的 image->base64 解决方案。

---

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

• 解决方案不能有外部依赖项(即 $.getImageData)。
• 它需要 100% 封装以便携带。
• 图片的来源和数量是可变的，并且它们必须是 URL 格式(不可预先使用 base64 数据)。

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

谢谢。

Answer 1

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

经过广泛的挖掘(我在同一个修复中)我相信这是唯一的解决方案，除了编写一个可以将图像发送到的 PHP 脚本。问题当然是没有办法将图像发送到 PHP 脚本，除非这三个条件中的任何一个为真:

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