视图是否可以在不先将其保存到文件的情况下显示 WebImage？

Question

我不确定我是否正确使用了 WebImage 类。

我有一个控制器，可以从数据库中提取照片和一些相关信息（cmets、上传日期、文件名）。我想返回包含此信息的局部视图，并显示图像以及额外信息。

所以我从字节数组中创建了一个新的 WebImage，但是如何显示呢？

根据this article 应该很简单

1. 您需要使用 Razor 语法并创建一个变量 包含图片：
   @{ var myImage = WebImage("/Content/myImage.jpg") // Work with the image… }

2. 然后，为了在页面中加载图像，您必须显示 包含 HTML <img/> 标记内的图像的变量：
   <img src="@myImage"/>

除了不起作用，它只会输出<img src="System.Web.Helpers.WebImage">，而调用.Write也无济于事。

有什么方法可以做到这一点，还是我需要将我的动作分成两个不同的动作，一个返回照片信息，一个返回照片本身？

Answer 1

你可以随时写出来！

您只是不像您想的那样使用 WebImage.Save()，而是使用 WebImage.GetBytes()。

在此示例中，您已经将图像作为字节数组保存到数据库中。将其简化为仅处理 jpeg。

    /// <summary>
    /// Reference this in HTML as <img src="/Photo/WatermarkedImage/{ID}" />
    /// Simplistic example supporting only jpeg images.
    /// </summary>
    /// <param name="ID">Photo ID</param>
    public ActionResult WatermarkedImage(Guid ID)
    {
        // Attempt to fetch the photo record from the database using Entity Framework 4.2.
        var photo = db.Photos.Find(ID);

        if (photo != null) // Found the indicated photo record.
        {
            // Create WebImage from photo data.
            // Should have 'using System.Web.Helpers' but just to make it clear...
            var wi = new System.Web.Helpers.WebImage(photo.Data); 

            // Apply the watermark.
            wi.AddImageWatermark(Server.MapPath("~/Content/Images/Watermark.png"), 
                                 opacity: 75, 
                                 horizontalAlign: "Center", 
                                 verticalAlign: "Bottom");

            // Extract byte array.
            var image = wi.GetBytes("image/jpeg");

            // Return byte array as jpeg.
            return File(image, "image/jpeg");
        }
        else // Did not find a record with passed ID.
        {
            return null; // 'Missing image' icon will display on browser.
        }
    }

Answer 2

无论如何都不能在单个剃刀视图中执行此操作...您需要创建一个单独的操作来渲染图像。

页面上的 img 标签将根据 img src 中提供的 url 对服务器进行单独的 http 调用。

Answer 3

尝试使用Data URLs 显示图像。这将避免临时将图像保存到磁盘和第二个 HTTP 请求来获取图像。您只需要往返一次即可对图像进行内联编码。

Answer 4

我不相信 WebImage 助手提供写入流的能力。因此，您可能需要将文件保存到临时位置（或可缓存位置），然后读取字节，并将图像写回为 FileStreamResult 指定内容类型和数据。

Answer 5

您可以将 WebImage 转换为 Base64 编码的字符串并在页面上的数据 URL 中使用。使用 HTML 画布可以很容易地完成。

服务器端生成Base64字符串并创建数据url

// C# Razor code
WebImage myWebImage;
// you need to now set the WebImage object in your code
string imagebase64string = Convert.ToBase64String(myWebImage.GetBytes());
string dataUrl = string.Format("data:image/jpeg;base64,{0}", imagebase64string);

使用 Razor 语法将数据 url 注入到 Javascript 代码中，当页面加载时在浏览器中呈现图像：

// Javascript Code
var myCanvas = document.getElementById('my-image-canvas');
var imageCtx = myCanvas.getContext('2d');
var myImage = new Image;
myImage.onload = function () {
   imageCtx.drawImage(myImage, 0, 0);
}
myImage.src = '@dataUrl';

下面是一个示例应用程序的链接，该应用程序演示了这一概念，并展示了如何使用使用相同概念的单个 Razor 页面轻松呈现 ASP.Net 图表。

https://github.com/webextant/webimage

Answer 6

我使用了@Brady321 的方法（谢谢；））但我的代码看起来有点不同（见下文）。 Brady 方法的优点是文件不需要保存到磁盘 - 只需上传并显示！

WebImage photo = null;
var dataUrl = "";

if (IsPost)
{
    photo = WebImage.GetImageFromRequest();
    if (photo != null)
    {
        string imagebase64string = Convert.ToBase64String(photo.GetBytes());
        dataUrl = string.Format("data:image/jpeg;base64,{0}", imagebase64string);
    }
}

文件上传和显示部分如下所示：

<div class="col-md-4">
    <h2>Display Image on the Fly</h2>
    <h1>Displaying an Image On the Fly</h1>

    <form action="" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend> Upload Image </legend>
            <label for="Image">Image</label>
            <input type="file" name="Image" />
            <br />
            <input type="submit" value="Upload" />
        </fieldset>
    </form>
    <h1>Uploaded Image</h1>
    @if (dataUrl != "")
    {
    <div class="result">

        <img src="@dataUrl" alt="image" />

    </div>
    }
</div>

关键部分是：<img src="@dataUrl" alt="image" />

Answer 7

除了我之前的回答，基于 Brady321 的回答，我还有一种类似的替代方法适用于不使用 Razor/.cshtml 的 ASP.NET 4.7.2 项目。这是在 VB.NET 中，但也可以在 C# 中使用：

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            . . .
            If IsPostBack Then
                ' A postback
                Dim dataURL As String
                Dim photo As System.Web.Helpers.WebImage
                photo = System.Web.Helpers.WebImage.GetImageFromRequest()
                If (photo IsNot Nothing) Then
                    Dim imagebase64string As String
                    imagebase64string = Convert.ToBase64String(photo.GetBytes())
                    dataURL = String.Format("data:image/jpeg;base64,{0}", imagebase64string)
                    UploadedImage.Src = dataURL
                End If


            . . .
   End Sub

.aspx HTML 看起来像这样（缺少 src 参数会导致警告但工作正常）：

                                          <form action="" method="post" enctype="multipart/form-data">
                                            <fieldset>
                                                <legend> Upload Image </legend>
                                                <label for="Image">Image</label>
                                                <input type="file" name="Image"  />
                                                <br />
                                                <input type="submit" value="Upload" id="Submit" onsubmit="UploadFile2" runat="server" />
                                            </fieldset>
                                        </form>
                                      <h1>Uploaded Images</h1>

                                      <img  alt="image" id="UploadedImage" runat="server" />