使用 jquery 显示 byte[] 图像

Question

当单击拇指图像时，我必须在同一视图的 div 中以实际大小显示图像。我将解释我的情况。我正在使用 asp.net mvc 2 应用程序。在我看来，我有图像的缩略图，这些图像作为 byte[] 存储在数据库中，并且 fileId 作为隐藏字段。单击缩略图时，我需要显示存储在数据库中的实际图像。实际图像应显示在同一视图中的 div 中，单击缩略图时应显示该视图。这应该使用 jquery 来实现。 感谢您对此进行调查。

Answer 1

您可以使用 HttpHandler 来实现此目的。向您的项目添加一个通用处理程序，并在 ProcessRequest 方法中执行类似以下操作

            context.Response.Clear();

            var imageID = context.Request.QueryString["imageID"];   

            MemoryStream stream = new MemoryStream();   

            try
            {
                byte[] buffer = GetYourImageBuffer(imageID);                    

                if(buffer != null)
                {
                    stream = new MemoryStream(buffer);
                    Image image = Image.FromStream(stream);
                    context.Response.ContentType = "image/jpeg"; //Or what ever
                    image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
                }                    
            }
            finally
            {
                context.Response.Flush();
                stream.Close();
            }

然后在您的 html 中您将能够通过以下方式调用它：

<img src="ImageHandler.ashx?imageID=<%: Model.Image.ID %>" />

Answer 2

如果数据库中的图像是字节格式的，那么首先需要将图像保存在服务器目录中，保存图像文件后，借助jquery将其显示。您还可以使用灯箱等插件以更具吸引力的方式显示图像。

这样，您将能够在使用 jquery 并发出 AJAX 请求来获取图像的同一视图上显示图像。