Create Image based on JSON output

Question

I need help to create set of images via JSON in ASP .NET MVC4.

Is it possible to do?

My working code is following and I have no idea how to integrate that functionality.

Thank you for any help!

[AcceptVerbs("POST")]
public JsonResult ShowUserImages(string id)
{
   var result = List<Bitmap>();

   // Create/Get Images and send it with JSON ???

   return Json(result, JsonRequestBehavior.AllowGet);
}

HTML

 $.post(url, function (data) {
         if (data) {
             // Can we create an IMAGE tag here using JSON output ???           

} else {
             alert('Sorry, there is some error.');
         }
     });

Check this http://www.worldwidewhat.net/2012/07/how-to-draw-bitmaps-using-javascript/ — PSL, Apr 30 '13 at 18:13
I don't really get the point where the problem is. You can just return a list of image URLs in JSON format and create your image set from these or if you really want to return images as data you could base64 encode them (but i don't get the point why this should be necessary) — Felix Bayer, Apr 30 '13 at 18:14
@FelixBayer There are no any images URLs. All images I create on fly. — NoWar, Apr 30 '13 at 18:15
@Metropolitan Ah ok. So you need to go the encode base64 > decode base64 / render base64 image way PSCoders link covers. — Felix Bayer, Apr 30 '13 at 18:19
@FelixBayer Do you think I can use something like this http://stackoverflow.com/questions/12573228/asp-net-mvc-base64string-to-html-image — NoWar, Apr 30 '13 at 18:21
Pretty much, yes. You could also convert the bitmap list to base64 string list and return this in json format and then build up the image tags using jQuery. To convert the Bitmaps to base64 strings refer to http://stackoverflow.com/questions/7350679/convert-a-bitmap-into-a-byte-array-in-c and then simply `string base64String = Convert.ToBase64String(imageBytes);`. — Felix Bayer, Apr 30 '13 at 18:28
@FelixBayer Also I found this http://www.codeproject.com/Articles/201767/Load-Base64-Images-using-jQuery-and-MVC — NoWar, Apr 30 '13 at 18:29
That's what i was talking about. You can simply adapt that and do it with a list of images. Glad you found the resource you needed. ;-) Good luck with your project. — Felix Bayer, Apr 30 '13 at 18:45
@FelixBayer Thank you, bro! I will ask God to send you good Whisky and Love! :) — NoWar, Apr 30 '13 at 18:51

score 3 · Accepted Answer · answered Apr 30 '13 at 19:22

Solution is here http://www.codeproject.com/Articles/201767/Load-Base64-Images-using-jQuery-and-MVC

So in my case it will be like

[AcceptVerbs("POST")]
public JsonResult ShowUserImages(string id)
{
   var bitmap = GenerateBitmap(id);

   MemoryStream ms = new MemoryStream();
   bitmap .Save(ms, ImageFormat.Png);
   var image = Convert.ToBase64String(ms.ToArray());
   return Json(new { base64imgage = image }, JsonRequestBehavior.AllowGet);
}

HTML

 $.post(url, function (data) {
         if (data) {
               var imag = "<img "
                          + "src='" + "data:image/jpg;base64,"
                          + data.base64imgage + "'/>"; 
                 $("#divMyLetterImage").html(imag)    

} else {
             alert('Sorry, there is some error.');
         }
     });

Create Image based on JSON output

1 Answers1