我有一个返回缩略图图像的控制器:
public ActionResult Thumbnail(int width, int height, int ArtworkId, int PhotoTypeId)
{
byte[] photo = null;
try
{
photo = db.Photos.Where(x => x.ID == ArtworkId && x.PhotoTypeId.ID == PhotoTypeId).FirstOrDefault().ImageBytes;
}
catch
{
using (var webClient = new WebClient())
{
string baseUrl = Request.Url.GetLeftPart(UriPartial.Authority);
photo = webClient.DownloadData(baseUrl + "/Content/Images/NoImage.png");
}
}
MemoryStream ms = new MemoryStream(photo);
Image i = Image.FromStream(ms);
// http://stackoverflow.com/questions/7319842/
using (var srcImage = i)
using (var newImage = new Bitmap(width, height))
using (var graphics = Graphics.FromImage(newImage))
using (var stream = new MemoryStream())
{
graphics.SmoothingMode = SmoothingMode.AntiAlias;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
graphics.DrawImage(srcImage, new Rectangle(0, 0, width, height));
newImage.Save(stream, ImageFormat.Png);
return File(stream.ToArray(), "image/png");
}
}
然后我有一个简单地调用4个缩略图的视图:
<div class="row">
<div class="col-lg-3">
<div>FRONT</div>
<div><img src="@Url.Action("Thumbnail", "ImageUpload", new { width = 200, height = 200, ArtworkId = 1, PhotoTypeId = 1, @id = "PhotoTypeId1" })" alt="Front" /></div>
<div>@Html.ActionLink("Upload Photo", "Index", "Image", null, new { @class = "modal-link btn btn-success" })</div>
</div>
<div class="col-lg-3">
<div>BACK</div>
<div><img src="@Url.Action("Thumbnail", "ImageUpload", new { width = 200, height = 200, ArtworkId = 1, PhotoTypeId = 2, @id = "PhotoTypeId2" })" alt="Back" /></div>
<div>@Html.ActionLink("Upload Photo", "Index", "Image", null, new { @class = "modal-link btn btn-success" })</div>
</div>
<div class="col-lg-3">
<div>PERSPECIVE</div>
<div><img src="@Url.Action("Thumbnail", "ImageUpload", new { width = 200, height = 200, ArtworkId = 1, PhotoTypeId = 3, @id = "PhotoTypeId3" })" alt="Perspective" /></div>
<div>@Html.ActionLink("Upload Photo", "Index", "Image", null, new { @class = "modal-link btn btn-success" })</div>
</div>
<div class="col-lg-3">
<div>PERSPECTIVE</div>
<div><img src="@Url.Action("Thumbnail", "ImageUpload", new { width = 200, height = 200, ArtworkId = 1, PhotoTypeId = 4, @id = "PhotoTypeId4" })" alt="Perspective" /></div>
<div>@Html.ActionLink("Upload Photo", "Index", "Image", null, new { @class = "modal-link btn btn-success" })</div>
</div>
</div>
我知道图像存在于数据库中。当我减少页面以单独使用任何图像时,它可以很好地工作。
当我使用4张图像并进入调试模式时,它几乎就像是4张图像相互绊倒了#34;在生成时。
我显然做错了或做错了事。:)
答案 0 :(得分:0)
所有4个请求都是并行进行的,因此当您调试并单步执行代码时,它看起来像是“互相绊倒”。这是正常的行为。 在redering视图时考虑使用HttpContext.Current.IsDebuggingEnabled,o只是在想要调试时直接调用Thumbnail action。