7

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

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

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

根据这篇文章，它应该很简单

  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没有帮助。

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

4

7 回答 7

9

你可以在飞行中写出来！

您只是不像您想的那样使用 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.
        }
    }
于 2012-02-19T01:44:26.043 回答
5

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

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

于 2011-07-20T17:12:11.050 回答
4

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

于 2012-11-24T12:15:22.840 回答
2

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

于 2011-07-20T17:17:03.973 回答
2

您可以将 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

于 2016-10-02T19:13:19.307 回答
0

我使用了@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" />

于 2020-01-29T09:26:11.847 回答
0

除了我之前的回答，基于 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" />
于 2020-01-30T10:15:28.363 回答