Question

在我的ASP.Net MVC 4应用程序中，我有一个允许用户将鼠标悬停在图像上以获得全尺寸预览的视图。效果很好。

目前，我将用户悬停的图像设置为静态宽度和高度50和50，如下所示：

<img id="@Model.Value" class="image-preview" height="50" width="50" src="@Model.ImageString" />

@Model.ImageString是由此操作创建的值：

[HttpGet]
public string GetImageUrl(Guid fileId)
{
    var file = db.FetchedFiles
        .First(ff => ff.ID == fileId);

    return "data:image/*;base64," + Convert.ToBase64String(file.Data);
}

上面的操作是我要修改的内容。如何以与原始文件相同的比例输出Convert.ToBase64String(file.Data)作为缩略图？

提前致谢！

Answer 1

我在网上找到了一个例子，但我不记得到底在哪里。我猜它是一种常见的解决方案。

这就是我的目标：

using (var ms = new MemoryStream(data))
{
    var image = Image.FromStream(ms);

    var ratioX = (double)150 / image.Width;
    var ratioY = (double)50 / image.Height;
    var ratio = Math.Min(ratioX, ratioY);

    var width = (int)(image.Width * ratio);
    var height = (int)(image.Height * ratio);

    var newImage = new Bitmap(width, height);
    Graphics.FromImage(newImage).DrawImage(image, 0, 0, width, height);
    Bitmap bmp = new Bitmap(newImage);

    ImageConverter converter = new ImageConverter();

    data = (byte[])converter.ConvertTo(bmp, typeof(byte[]));

    return "data:image/*;base64," + Convert.ToBase64String(data);
}

Answer 2

您需要返回已在服务器上调整大小的新图像。

到目前为止，最简单的方法是使用ImageResizing并简单地传入文件流和ResizeSettings以指定所需的尺寸。然后只需将调整后的文件返回为base64。

图书馆非常广泛，并且有大量示例，因此您应该能够找到解决方案或根据您的需求进行调整。

以下是一个示例：http://imageresizing.net/docs/howto/upload-and-resize

如何在保持比例的同时调整图像字节[]的大小？

2 个答案: