Is it possible for the view to display WebImage without first saving it to a file?

Question

I am not sure if I am using the WebImage class WebImage .

I have a controller that pulls out a photo and some related information (comments, upload date, file name) from the database. I want to return a partial view containing this information and display the image along with additional information.

So, I created a new WebImage from an array of bytes, but how to display it?

According to this article, it should be quite simple.

• You need to work with Razor syntax and create a variable that will be with the image:
  @{ var myImage = WebImage("/Content/myImage.jpg") // Work with the image… }

• Then, to load the image on the page, you must show a variable containing the image inside the HTML <img/> :
  <img src="@myImage"/>

Except this doesn't work, it just prints out <img src="System.Web.Helpers.WebImage"> , and calling .Write doesn't help.

Is there a way to do this or do I need to divide my action into two different actions: one to return information about the photo, and one to return the photo?

Answer 1

In any case, you do not need to do this in one razor ... you need to create a separate action for rendering the image.

The img tag on the page is about to make a SEPERATE http call to the server based on the URL provided in img src.

Answer 2

You can write it on the fly!

You simply do not use WebImage.Save (), as you think, instead you use WebImage.GetBytes ().

In this example, you already saved the image as a byte array in the database. Simplified it a bit to handle only 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 3

Try using data urls to display the image. This will temporarily save the image to disk and a second HTTP request to receive the image. You just need to make one round trip to encode the embedded image.

Answer 4

I do not believe that the WebImage helper provides the ability to write to a stream. Because of this, you will most likely need to save the file at a temporary location (or cacheable location), and then read the bytes and write the image back as a FileStreamResult , determining the type of content and data.

Answer 5

You can convert WebImage to Base64 encoding and use it in the data URL on the page. Using an HTML canvas makes this pretty easy to do.

A server failure will generate a Base64 string and create a data 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); 

Using Razor syntax, enter the data URL into the Javascript code that displays the image in the browser when the page loads:

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

Below is a link to an example application demonstrating this concept, and also how easy it is to display ASP.Net graphics using a single Razor page using the same concept.

https://github.com/webextant/webimage