显示大型 Base64 图像 MVC 4 DOTNET

Posted 2023-05-08

【中文标题】显示大型 Base64 图像 MVC 4 DOTNET

【英文标题】：Display Large Base64 Image MVC 4 DOTNET

【发布时间】：2018-10-10 19:49:24

【问题描述】：

首先，我在 SSMS 上以二进制形式存储了一些图像，这些图像以字节大小超过 10K 的字节格式存储。

到目前为止，我已经尝试了几种技术，这些技术将在下面列出。

请注意，我读到 base64 图像在渲染时通常用于 64 x 64 实例的小型基本类型图像。

问题不是将图像转换为 base64，而是找到一种方法，使用 Jquery 从 DB 一个一个请求图像，然后添加图片 base64 到 DOM 上的 Image 属性。

//注意：请求的图像从 api 端转换为 base64，但图像二进制文件可能很大，因此当检查说文件大小太大时，Base64 总是在浏览器 img src 属性上返回大。

请不要指出我说它用于小图像是在寻找一种解决方案，让某人使它适用于更大的图像。

调整大小不是一个选项，因为它会扼杀文档分辨率以及查看文档的方式。虽然如果有解决方案，你能指出我。我试图调整图像的大小只是为了让您注意，但是如果拉伸很明显，图像会在演示时被像素化。

请记住我要求更好的方法，或者我是否可以使用带有大型 Base64 的 Jquery 在 dom 上加载多个图像。

我也知道我可以使用链接显示图像列表，然后允许用户单击链接以查看该特定图像。

我正在使用 Dotnet 4.5 MVC

我尝试过的代码：

    $(function () 
    $(".my-image-tag").each(function () 
        var img = $(this);
        var apiUrl = "www.xxxx.com";
        console.log(
            $.ajax(
                type: 'GET',
                url: apiUrl ,
                data:  'Id': img.attr('data-id') ,
            ).done(function (data) 
                console.log(data.Image);
                img.attr('src', 'data:image/jpg;base64,' + data.Image);
            ).error(function (jqXHR, textStatus, errorThrown) 
                ///Need a Error Logger Page
            )
        );
    );
);

【问题讨论】：

为什么不将图像作为二进制文件提供，而不是返回到 base64？您只需在图像上设置 src 标签以指向您的 API 服务器，而不是尝试下载 base64 并创建数据 URL。是的，您可以使用数据 URL 在服务器上的 html 中嵌入图像，但如果您在客户端这样做，则根本没有任何好处，而且在 HTTP/2 世界中，在服务器端嵌入也没什么好处。

嘿@Rup 记住图像没有存储在从数据库中检索它们然后发布到客户端应用程序的文件夹中。你是说我可以做到这一点<img src="api.xxxx.com/id"/> 这将按原样读取二进制文件

@DavidWhite，这比看起来容易。在代码中从服务器返回图像，基本上是在响应中写入一个字节数组。 img 标签不知道这些字节来自哪里（数据库、文件等），但它可以工作。

@derloopkat 我试着理解给我一秒钟你说这个 url api.xxxx.com/id 将转到我在 API 应用程序 GetImage(int id) 上的方法然后当我从我的数据库中选择字节数组时将返回这些字节，图像标签将自动呈现该图像。我无法概念化这个请解释一下

是的，这就是一般的想法。我使用 Asp.Net webforms 来提供来自 DB 的图像，我猜它在 MVC 中非常相似。我的 Html 代码看起来像 <img src="http://localhost/getImage.aspx?name=cars20" />。然后在我的getImage.aspx 中，我要去数据库并在响应中写入图像的字节。后来我还使用 Http Handlers 来实现与从 webform 返回图像相同的功能。请记住在响应中指定正确的 MIME 类型。

【参考方案1】：

正如 Rup 在评论中建议的那样，您最好的选择可能是在您的 API 中创建一个提供图像的方法。

<img src="/controller/getimage/imagename">

然后在您的控制器中类似于...

public ActionResult getimage(string imagename)

   var data = //call database to get image data
   var file = //convert data into File "image/jpeg" or whatever file type you use
   return file;

【讨论】：

请问我将如何引用图像标签img.attr('src', data.File); 上的返回文件类型，它会像开箱即用那样呈现还是我需要转换从API 传递过来的文件。

当 MVC 操作回复一个文件时，它的功能与服务器上的图像文件完全相同。如上所述，您只需要将源设置为控制器操作