MVC缩略图控制器不(始终)返回图像

时间:2015-05-27 10:45:17

标签: c# asp.net-mvc

我有一个返回缩略图图像的控制器:

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;在生成时。

我显然做错了或做错了事。:)

1 个答案:

答案 0 :(得分:0)

所有4个请求都是并行进行的,因此当您调试并单步执行代码时,它看起来像是“互相绊倒”。这是正常的行为。 在redering视图时考虑使用HttpContext.Current.IsDebuggingEnabled,o只是在想要调试时直接调用Thumbnail action。