CODEWITHSUNDEEP
javascriptc#web-servicesblob
Francisco Fernandez
Francisco Fernandez

Reputation: 841

Retrieve MySQL Image Blob in HTML

for my web app Im using C# WebService, JavaScript, jQuery and JavaScript I upload an image into a table with this structure:

Id | FileName | ContentType | Content
 1 |Tulips.jpg| image/jpeg  | (Binary/Image)

I want to show this information in a HTML page, at the moment my HTML show this information:

2 | Tulips.jpg | image/jpeg | System.Byte[]

I want to show the image instead of System.Byte[], how can I do that? This is all my code:

C# class

public class Imagenes { public Imagenes() { }

public Imagenes(int id, string fileName, string type, string content)
{
    Id = id;
    FileName = fileName;
    Type = type;
    Content = content;
}
   public int Id { get; set; }
   public string FileName { get; set; }
   public string Type { get; set; }
   public string Content { get; set; }       
}

DataBase Class

Here is no problem is just a Select * from.

WebMethod

[WebMethod]
public string Image(int id)
{
    DataTable dt = new DataTable();
    dt = conn.consultImg("tbl_images", id);
    Imagenes img;        
    List<Imagenes> list = new List<Imagenes>();
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        img = new Imagenes();
        img.Id = Convert.ToInt32(dt.Rows[i]["Id"]);
        img.FileName = dt.Rows[i]["FileName"].ToString();
        img.Type = dt.Rows[i]["ContentType"].ToString();
        img.Content = dt.Rows[i]["Content"].ToString();
        list.Add(img);
        img = null;
    }
    JavaScriptSerializer js = new JavaScriptSerializer();
    string lines = js.Serialize(list);
    return lines;
}

And JavaScript code:

var id = $('#Id').val();

$.ajax({
    type: "POST", 
    url: "ws_MyWebService.asmx/Image", 
    data: '{"id":' + id + '}', 
    dataType: 'json',
    contentType: 'application/json',
    timeout: 60000,
    error: function (xhr) {

    },
    success: function (data) {
        var aRC = JSON.parse(data.d);
        var lines = "";
        for (var i = 0; i < aRC.length; i++) {
            var id = aRC[i].Id;
            var fname = aRC[i].FileName;
            var type = aRC[i].Type;
            var content = aRC[i].Content;

            lines += '<p>' + id + '</p>';
            lines += '<p>' + fname + '</p>';
            lines += '<p>' + type + '</p>';
            lines += '<p>' + content + '</p>';

        }
        $('#MyDiv').html(lines);

Upvotes: 1

Views: 1751

Answers (2)

Hackerman
Hackerman

Reputation: 12295

You need to make two changes on your original code:

WebMethod 

//Change this line
img.Content = dt.Rows[i]["Content"].ToString();

//Use this instead
img.Content = Convert.ToBase64String(Serialize(dt.Rows[i]["Content"]));

Extra Method

public static byte[] Serialize(object obj)
{
  var binaryFormatter = new BinaryFormatter();
  var ms = new MemoryStream();
  binaryFormatter.Serialize(ms, obj);
  return ms.ToArray();
}

JavaScript

//Replace this line
lines += '<p>' + content + '</p>';

//With this one
line += '<p><img src="data:image/jpeg;base64,' + content + '" /></p>';

You can set the MaxJsonLength property on your Web.config:

<configuration> 
  <system.web.extensions>
   <scripting>
       <webServices>
           <jsonSerialization maxJsonLength="50000000"/>
       </webServices>
   </scripting>
  </system.web.extensions>
</configuration>

Upvotes: 2

geedee
geedee

Reputation: 26

You could return a base64 encoded string representation of the image.

Using the Convert.ToBase64String Method.

Where you output the image you would then have:

<img src="data:image/jpeg;base64, <!-- base64 string here -->" />

Upvotes: 0

Related Questions