Renderizar byte [] a imagen usando jQuery

Question

Actualmente estoy leyendo una imagen de una base de datos de SQL Server como byte []. Me gustaría pasar la imagen como un byte [] o una imagen real a jQuery y cargarla dinámicamente.

¿Cómo y cuál sería el mejor enfoque para hacer esto?

Gracias de antemano. :)

Editar: Aquí está la solución:

del lado del servidor

1. /C#: string json = JsonConvert.SerializeObject(employee);
2. del lado del cliente/Ajax: $('#image').attr('src', "data:image/jpg;base64,"+employee.Image);

Answer 1

Retorno del byte [] desde el servidor web con el conjunto de tipos de contenido correctos, de esa manera usted debería poder configurarlo como fuente para una etiqueta de imagen. Debería ser la solución más simple.

Answer 2

No creo que usar jQuery es lo que hay que hacer aquí. Es una cosa del lado del cliente. JavaScript, para ser específico.

Normalmente, usted crea una página que escribe todos estos bytes en una matriz usando Response.Write() y configura el tipo de contenido como jpeg, bmp, etc. según el tipo de imagen.

Answer 3

Si tiene que hacerlo de esta manera, puede insertar datos de imagen directamente en el atributo src utilizando la siguiente sintaxis:

data:image/<type>;base64,<data> 

sustituirlo por el tipo de imagen (jpg, png, gif), y con sus datos , codificado en base 64.

Sin embargo, como decyclone dice, la mejor manera de hacerlo sería crear una página separada que solo genere sus datos de imagen, y envíe el encabezado de tipo de contenido apropiado. A continuación, configure el src de la imagen para que apunte a esa página.

Answer 4

Actualmente estoy leyendo una imagen de JSON Respuesta. Me gustaría pasar esta cadena codificada al control de imagen en la plantilla Jquery y cargarla dinámicamente, ¿cómo y cuál sería el mejor enfoque para hacer esto? Plantilla es la siguiente:

<script id="ImageDiv" type="image/png"> 
    <div style="width:200px;height:150px;> 
      <img src="${ImageView}" alt="" /> 
     </div> 
</script> 

archivo JS es el siguiente:

var demo = new Object(); 

$.each(msg.images, function (key, value) 
      { 
       if (this.IsImage) 
       { 
        demo["ImageView"]="data:image/png;base64,"+this.Image; 
        $('#ImageDiv').tmpl(demo).appendTo("#Demo-Image"); 

       } 
      }); 

JSON respuesta es la siguiente:

msg = {"Images":[ "Description": "Image1", "Image": "encoded string of image", "IsImage": true, "MimeType": "image/png", } ] 

menos espacio para copiar cadena codificada de imagen.