c# - How can I pass a Bitmap from ASP.NET to JavaScript and display it? - Stack Overflow

admin管理员组

文章数量:1426385

This is my first ASP.NET application and I'm having trouble passing a server side Bitmap object to the JavaScript client. I'm using SignalR to connect the server and client.

I've tried several things and hope this is easy for someone with ASP.NET experience.

Here is my server side 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);
        }
    }

On the client side I want to get the Bitmap and display it:

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

Do I have to convert it to a JSON object? If I do this how do I get it back to an image on the client side?

Thanks in advance for helping.

This is my first ASP.NET application and I'm having trouble passing a server side Bitmap object to the JavaScript client. I'm using SignalR to connect the server and client.

I've tried several things and hope this is easy for someone with ASP.NET experience.

Here is my server side 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);
        }
    }

On the client side I want to get the Bitmap and display it:

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

Do I have to convert it to a JSON object? If I do this how do I get it back to an image on the client side?

Thanks in advance for helping.

• javascript
• c#
• asp
• signalr

Share Improve this question Follow asked Oct 3, 2014 at 19:10 Chad DienhartChad Dienhart 5,25433 gold badges2626 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You could convert image to byte array:

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

And then enocde it to base64 - and you can use base64 as image source in html:

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

Another way would be to save that image on server and return only link to the path on server, you could use something like GUID to produce unique name and periodically cleanup old images or cleanup after client disconnect, etc. Advantage of this would be smaller network traffic on large images - you would save ~37% of traffic by sending just file name.

本文标签： cHow can I pass a Bitmap from ASPNET to JavaScript and display itStack Overflow