Convert image to base64 to view it in a view

1

Through a web api I am getting the path of an image stored on the server. The path is a string that I convert to an array of bytes and then convert it to a base64 image. When I visualize the image in the view, it does not throw an error but it does not load any image. I can not find where I have the error.

CODE:

// Por cada registro que obtengo, transformo el campo "adjunto" (ruta de la imagen) en arreglo de bytes
    private MisTurnos MapearAMisTurnosDesdeRegistro(Registro registro)
    {
        return new MisTurnos
        {
            Codigo = Convert.ToInt32(registro["numero"]),
            Fecha = Convert.ToDateTime(registro["fecha"]),
            Hora = registro["hora"].ToString(),
            Servicio = registro["servicio"].ToString(),
            Sucursal = registro["sucursal"].ToString(),
            Estado = Convert.ToInt32(registro["estado"]),

            // Esta propiedad es la que utilizo para guardar la imagen
            Orden = Encoding.UTF8.GetBytes(registro["adjunto"].ToString())
        };
    }


// Por cada registro que obtuve del web api con la ruta de la imagen correspondiente
// transformada en arregl ode bytes, transformo ese arreglo en base64
    private IEnumerable<MisTurnosViewModel> ConvertirOrdenEnImagen(IEnumerable<MisTurnosViewModel> listaTurnos)
    {
        foreach (var item in listaTurnos)
        {
            item.OrdenImagen = "data:image/png;base64," + Convert.ToBase64String(item.Orden);
        }

        return listaTurnos;
    }

Finally, in the view, I show in a tag the property OrderImage, which contains the image transformed to base64:

<img [email protected] />
    
asked by Willy616 26.05.2017 в 19:47
source

1 answer

3

To convert an image into a coded string you can use something like this:

    /// <summary>
    /// Convierte una imagen en una cadena de texto
    /// </summary>
    /// <param name="Path">Ruta la la imagen</param>
    /// <returns>cadena de texto</returns>
    private static string Conversor(string Path)
    {
        byte[] imageArray = System.IO.File.ReadAllBytes(Path);
        string base64ImageRepresentation = Convert.ToBase64String(imageArray);
        return base64ImageRepresentation;
    }

Suppose that in the model we get the value of the image:

    public string Imagen64
    {
        get
        {
            return "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";
        }
    }

To show it in the view you can use:

      @{
        var imgSrc = String.Format("data:image/gif;base64,{0}", Model.Imagen64);
      }
        <p>Imagen es:</p>
        <img src="@imgSrc" />
    
answered by 26.05.2017 / 21:31
source