Question

我不确定我是否正确使用WebImage课程。

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

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

根据this article，它应该非常简单

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



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

除非不起作用，否则只输出<img src="System.Web.Helpers.WebImage">并且调用.Write无效。

有没有办法做到这一点，还是我需要将我的动作分成两个不同的动作，一个用于返回照片信息，一个用于返回照片本身？

Answer 1

你可以随时写出来！

你只是不像你想的那样使用WebImage.Save（），而是使用WebImage.GetBytes（）。

在此示例中，您已将图像作为字节数组保存到数据库中。简化了一下，只处理jpegs。

    /// <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对服务器进行SEPERATE http调用。

Answer 3

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

Answer 4

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

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语法将数据网址注入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" />

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

7 个答案: