Có thể hiển thị một WebImage mà không lưu nó vào một tệp trước không?

Question

Tôi không thực sự chắc chắn nếu tôi đang sử dụng lớp WebImage chính xác.

Tôi có bộ điều khiển để kéo ảnh và một số thông tin liên quan (nhận xét, ngày tải lên, tên tệp) từ cơ sở dữ liệu. Tôi muốn trả lại một phần xem có chứa thông tin này và hiển thị hình ảnh cùng với thông tin bổ sung.

Vì vậy, tôi đã tạo một WebImage mới từ mảng byte, nhưng làm cách nào để hiển thị nó?

Theo this article nó nên được khá đơn giản

1. Bạn cần phải làm việc với cú pháp Razor và tạo ra một biến mà sẽ chứa các hình ảnh:
   @{ var myImage = WebImage("/Content/myImage.jpg") // Work with the image… }

2. Sau đó, trong để tải hình ảnh trong trang, bạn phải hiển thị biến số chứa hình ảnh bên trong HTML <img/> ta g:
   <img src="@myImage"/>

Trừ điều đó không làm việc, nó chỉ kết quả đầu ra <img src="System.Web.Helpers.WebImage"> và gọi .Write không giúp.

Có cách nào để làm điều này hay tôi cần phải chia nhỏ hành động của mình thành hai hành động khác nhau, một để trả lại thông tin ảnh và một để trả lại ảnh?

Answer 1

Không có cách nào để làm điều đó trong một chế độ xem dao cạo duy nhất ... bạn cần phải tạo một hành động riêng biệt để hiển thị hình ảnh.

Thẻ img trên trang sẽ thực hiện cuộc gọi http SEPERATE tới máy chủ dựa trên url được cung cấp trong img src.

Answer 2

Tôi không tin rằng trình trợ giúp WebImage cung cấp khả năng ghi vào luồng. Do đó, bạn có thể cần phải lưu tệp vào vị trí tạm thời (hoặc vị trí có thể lưu vào bộ nhớ cache) và sau đó đọc các byte và ghi lại hình ảnh dưới dạng FileStreamResult chỉ định loại nội dung và dữ liệu.

Answer 3

Bạn có thể viết nó nhanh chóng!

Bạn chỉ không sử dụng WebImage.Save() như bạn nghĩ, thay vào đó bạn sử dụng WebImage.GetBytes().

Trong ví dụ này, bạn đã lưu hình ảnh dưới dạng mảng byte vào cơ sở dữ liệu. Đơn giản hóa nó một chút để chỉ xử lý 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 4

Hãy thử sử dụng Data URLs để hiển thị hình ảnh. Điều này sẽ tránh tạm thời lưu hình ảnh vào đĩa và yêu cầu HTTP thứ hai để tìm nạp hình ảnh. Bạn sẽ chỉ cần thực hiện một chuyến đi vòng để mã hóa nội tuyến hình ảnh.

Answer 5

Bạn có thể chuyển đổi chuỗi WebImage thành chuỗi được mã hóa Base64 và sử dụng trong URL dữ liệu trên trang. Sử dụng một khung HTML làm cho việc này khá dễ thực hiện.

Server side tạo ra chuỗi Base64 và tạo ra các url dữ liệu

// 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); 

Sử dụng Razor cú pháp tiêm url dữ liệu vào mã Javascript trong đó ám chỉ rằng hình ảnh trong trình duyệt khi tải trang:

// 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'; 

Dưới đây là liên kết đến một ứng dụng mẫu thể hiện khái niệm này cũng như cho thấy cách dễ dàng hiển thị các biểu đồ ASP.Net bằng cách sử dụng một trang Razor duy nhất sử dụng cùng một khái niệm.

https://github.com/webextant/webimage