时间戳

首页 > 解决方案 > ASP.NET MVC 中的图像压缩

javascript - ASP.NET MVC 中的图像压缩

问题描述

我有很多图像（大约 1,000 个）大约 30kb，如果你问为什么，索引的负载大小是 45.5mb。

我从服务器获取图像，然后转换为字节数组，然后转换为 base64 字符串以发送到索引

data:image/webp;base64,{0}

我用这个：

Html.Raw(String.Format("data:image/webp;base64,{0}", Convert.ToBase64String(File.ReadAllBytes("\\\\ImageServer\\ImagePathFolder\\Image.JPG".Replace("\\", "\\\\")))))

到目前为止，索引加载大约需要 24 秒。

我寻求帮助以压缩图像并获得至少一半的尺寸。

注意：所有这些代码都在带有 C# 的 ASP.NET MVC 中

标签： javascriptc#asp.netmodel-view-controller

解决方案

您应该在单独的请求中返回二进制大对象（“BLOB”，通常大于一千字节左右） - 这有很多优点，但主要原因是

  • 浏览器可以缓存单个响应和图像。
  • 它们可以直接传输而无需使用像 Base64 这样的低效格式（有效地使用 1 个字节来传输 6 位数据）进行编码。

而使用data:URI 将图像内嵌在页面中是很浪费的，因为图像数据需要在每次请求时加载并编码为 Base64。尽可能避免磁盘 IO（此外，您的代码没有使用 Async IO，因此效率特别低）。

在 ASP.NET MVC 和 ASP.NET Core 中，定义一个新的 Action 来处理图像请求：

[HttpGet("images/{imageName}")]
public ActionResult GetImage( String imageName )
{
    String imagefileName = GetImageFileName( imageName ); // don't forget to sanitize input to prevent directory traversal attacks

    // Use `FileResult` to have ASP.NET MVC efficiently load and transmit the file rather than doing it yourself:
    return new FilePathResult( imagefileName, "image/jpeg" ); // assuming all images are JPEGs.
}

在您的页面中，使用如下<img />元素：

<img src="@( this.Url.Action("GetImage", new { imageName = "foo" } ) )" />

在 ASP.NET WebForms 中，您需要使用 an *.ashx，但原理是相同的。

推荐阅读