¿Es posible que una vista muestre una imagen web sin guardarla antes en un archivo?

Question

No estoy muy seguro de si estoy utilizando la clase WebImage correctamente.

Tengo un controlador que extrae una foto y cierta información relacionada (comentarios, fecha de carga, nombre de archivo) de la base de datos. Quiero devolver una vista parcial que contenga esta información, y mostrar la imagen junto con la información adicional.

Así que creé una nueva WebImage desde la matriz de bytes, pero ¿cómo la visualizo?

Según this article que debería ser bastante simple

1. Es necesario trabajar con la sintaxis Razor y crear una variable que se contendrá la imagen:
   @{ var myImage = WebImage("/Content/myImage.jpg") // Work with the image… }

2. Luego, en para cargar la imagen en la página, usted tiene que demostrar la variable que contiene la imagen dentro de un HTML <img/> ta g:
   <img src="@myImage"/>

Excepto que no funciona, sólo se da salida a <img src="System.Web.Helpers.WebImage"> y llamando .Write no ayuda.

¿Hay alguna manera de hacer esto o debo dividir mi acción en dos acciones diferentes, una para devolver la información de la foto y otra para devolver la foto en sí misma?

Answer 1

No hay forma de hacerlo en una sola vista de la máquina de afeitar ... debe crear una acción separada para representar la imagen.

La etiqueta img en la página va a hacer una llamada http SEPERATE al servidor según la url proporcionada en el img src.

Answer 2

No creo que el ayudante WebImage proporciona la capacidad de escribir en un arroyo. Debido a eso, es probable que necesita para guardar el archivo en una ubicación temporal (o una ubicación cacheable) y luego leer los bytes, y escribir la imagen de nuevo como un FileStreamResult que especifica el tipo de contenido y los datos.

Answer 3

Puede escribirlo sobre la marcha!

Simplemente no usas WebImage.Save() como piensas, sino que usas WebImage.GetBytes().

En este ejemplo, ya ha guardado una imagen como una matriz de bytes en la base de datos. Simplificado un poco para manejar solo 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

Pruebe usar Data URLs para mostrar la imagen. Esto evitará guardar temporalmente la imagen en el disco y una segunda solicitud HTTP para recuperar la imagen. Solo tendrá que hacer un viaje de ida y vuelta para codificar la imagen en línea.

Answer 5

Puede convertir WebImage en una cadena codificada en Base64 y usarla en una URL de datos en la página. Usar un lienzo HTML hace que esto sea bastante fácil de lograr.

lado

servidor generar la cadena Base64 y crear la url de datos

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

Utilizando la sintaxis Razor inyectar la url de datos en el código Javascript que hace que la imagen en el navegador cuando se carga la página:

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

A continuación se incluye un enlace a una aplicación de muestra que demuestra este concepto, así como también muestra cómo renderizar gráficos ASP.Net fácilmente usando una sola página Razor usando el mismo concepto.

https://github.com/webextant/webimage