使用 <img> 标签在 IE 11 中不显示大图像

Question

我有一个 cshtml 页面，它将图像作为字符串，并将其显示在图像标记中。这是代码：

@model ReadModel
@{
    ViewBag.Title = "Display";
    ViewBag.Project = "IS";
    Layout = null;
}

<body style="max-height:1100px; max-width:850px" >
    @if (Model.readImages.Count > 0)
    {
        //only images will hit this code. Other file types are written to the Response header in the controller
        string imgSrc = String.Format("data:" + Model.readImages[0].contentType + ";base64,{0}", Model.readImages[0].imageString);
        <img src="@imgSrc"  style="max-height:1100px; max-width:850px"/>
    }
    else
    {
        <p>No Image to display</p>;
    }
    <p>@Model.error</p>
</body>

问题是在 IE 11 中，如果图像很大（18 MB 的图像会失败），页面将一直旋转，直到最终失败并只显示一个白页。它适用于常规尺寸的图像。

现在，正如评论中提到的，如果文件不是图像，它会使用 C# 将文件的字节数组写入控制器中的响应来显示，如下所示：

byte[] bytes = Convert.FromBase64String(imageModel.readImages[0].imageString);
Response.Clear();
Response.ContentType = imageModel.readImages[0].contentType;//"application/pdf";
Response.AddHeader("content-length", bytes.Length.ToString());
//write the reponse the browser
Response.BinaryWrite(bytes);
Response.AppendHeader("content-disposition", "inline; filename=" + imageModel.readImages[0].fileName);
Response.End();

上面的 C# 代码也适用于显示图像，即使是非常大的图像，但是我的要求之一是图像必须能够打印在单个页面上，因此最大高度和最大宽度属性。

如果我使用 C# 代码编写图像，大图像将打印到 4 或 5 页。

所以我需要的是使 <img> 标签适用于大图像的方法，或者让 C# 代码调整图像大小以适合 8.5 x 11 页面。

我知道 chrome 可以很好地处理这些图像，不幸的是，另一个要求是让它在 IE 中工作。

检查 "Use software rendering instead of GPU rendering" 没有帮助。

有什么想法吗？

Answer 1

我建议您将此 CSS 代码应用到您的 IMG 标签可能有助于在 IE 中以单页显示/打印图像。

.pp
{
  margin: 0px;
  padding: 0px;
  width: 670px; /* width: 7in; */
  height: 900px; /* or height: 9.5in; */
  clear: both;
  background-color: gray;
  page-break-after: always;
}

示例：

在此示例中测试的图像大小约为 16.2 MB。

<!doctype html>
<html>
<head>
<style>
.pp
{
  margin: 0px;
  padding: 0px;
  width: 670px; /* width: 7in; */
  height: 900px; /* or height: 9.5in; */
  clear: both;
  background-color: gray;
  page-break-after: always;
}
#cube
{ 
  position: relative;
  top: 1in;
  left: 1in;
  width: 1in;
  height: 1in;
  background-color: white;
}
</style>
</head>
<body>

<div id="cube">
<img src="https://effigis.com/wp-content/uploads/2015/02/Iunctus_SPOT5_5m_8bit_RGB_DRA_torngat_mountains_national_park_8bits_1.jpg" class="pp"></img>
</div>

</body>
</html>

在带有打印预览的 IE 11 中输出：

参考：

How to format CSS for 8.5x11 inch printed pages

使用 <img> 标签在 IE 11 中不显示大图像

Large Images Not Showing in IE 11 Using <img> Tag

html

c#

asp.net-mvc

internet-explorer

image