Get image from binary data using jquery

Question

I am using web api to get the image from database, it is returning json data, now the image data which is coming in response is like this

�PNG

�� IHDR��@�� ��sRGB��gAMA��a�� pHYs��o�d��IDATx^��\�uލ�x��q��N^�q��q��%v��n�H�,Y�7J"A�N��H��{�� :H�$A��wi��g��9w��H�,�u��9s��yֳ��}��#�Á�1b��9�Ks��S��1b��9s �@/́��1b��9�ss �(&}�M�^��5~��9s��

how should i convert it back, so that i can see image in my browser , using jquery

current ajax is

 $.ajax({
                url:  "/api/v1/images/" + items.image.id + "/w" + items.image.width,
                type: 'GET',
                dataType: 'json',

                success: function (data) {
                  $('#' + items.id).attr('src',data.responseText);

                },
                error: function (status) {


                }
            });

If you want to stick with a json response containing your data, you should have a look at data URIs data:image/png;base64,<base64-encoded-image> — Volune
– Volune, Commented Aug 15, 2014 at 14:08

Prinzhorn · Accepted Answer · 2014-08-15 14:04:34Z

2

Just do this, it's easier than you think

var url = '/api/v1/images/' + items.image.id + '/w' + items.image.width;
$('#' + items.id).attr('src', url);

No need for ajax at all.

answered Aug 15, 2014 at 14:04

Prinzhorn

22.6k7 gold badges65 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get image from binary data using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related