如何将位图从 ASP.NET 传递到 JavaScript 并显示它？

Question

这是我的第一个 ASP.NET 应用程序，我在将服务器端 Bitmap 对象传递给 JavaScript 客户端时遇到了问题。我正在使用 SignalR 连接服务器和客户端。

我已经尝试了几件事，希望这对有 ASP.NET 经验的人来说很容易。

这是我的服务器端 C#：

    public void ScreenShot()
    {
        Rectangle bounds = this.Bounds;
        using (Image bitmap = new Bitmap(bounds.Width, bounds.Height))
        {
            using (Graphics g = Graphics.FromImage(bitmap))
            {
                g.CopyFromScreen(new Point(bounds.Left, bounds.Top), Point.Empty, bounds.Size);
            }

            Clients.Caller.updateImage(bitmap);
        }
    }

在客户端，我想获取位图并显示它：

        hubproxy.client.updateImage = function (image) {
            var img = document.createElement("img");
            img.src = image;
            document.body.appendChild(img);
        };

我必须将其转换为 JSON 对象吗？如果我这样做，我如何将它恢复到客户端的图像？

提前感谢您的帮助。

Answer 1

您可以将图像转换为字节数组：

public static byte[] ImageToByte(Image img)
{
   ImageConverter converter = new ImageConverter();
   return (byte[])converter.ConvertTo(img, typeof(byte[]));
}

然后将其编码为base64 - 您可以在html中使用base64作为图像源：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

另一种方法是将该图像保存在服务器上并仅返回服务器上路径的链接，您可以使用 GUID 之类的东西来生成唯一名称并定期清理旧图像或在客户端断开连接后清理等。这样做的好处是在大图像上减少网络流量 - 只需发送文件名即可节省约 37% 的流量。