how to convert string png to image in javascript

Question

Look at my code!

    var imageQRCODE;

    $.ajax({
    url: URL,
    data: { c1: ca, c2: cli},
    success: function(image) {
     imageQRCODE = image;
    }
    });

this is my html:

    <div class="areaQrCode"><img src="javascript:imageQRCODE"></div>

my ajax call returns a image string like this:

    "‰PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0000d\u0000\u0000\u0000d\b\u0002\u0000\u0000\u0000ÿ€\u0002\u0003\u0000\u0000\u0000\u0006bKGD\u0000ÿ\u0000ÿ\u0000ÿ ½§“\u0000\u0000\u0001ÞIDATxœíÜÁnÄ \fEÑRõÿ9Ýzƒä+üJ¦ºgÛ4\u0013=y,`\bëyž/õ|ß~€ObX€a\u0001†\u0005\u0018\u0016`X€a\u0001?»?¬µÆ?¬Žév÷ßûêõûœØ=ƒ•\u0005\u0018\u0016`XÀ¶gU'óÇNošê;‰ç¬¬,À°\u0000Ã\u0002Z=«ê|·;½£3nJ÷ z+\u000b0,À°\u0000Ü³Ò\u0012ýkŠ•\u0005\u0018\u0016`XÀ+z\u0016]ÛºÅÊ\u0002\f\u000b0,\u0000÷¬©>’îG‰û[Y€a\u0001†\u0005´zVâ·9ºžÕ™'&ž³²²\u0000Ã\u0002\f\u000bXo˜97ü‡\f\u000b0,`lÖÉ¾*ºïajÌEÇqV\u0016`X€a\u0001Ûq\u0016ýÍîä7>Úƒ\u0012ûN;Ïle\u0001†\u0005\u0018\u0016p´?«~Ï\u0013ã¬“1TbmËÊ\u0002\f\u000b0,`ìwÃN/ûË÷l(ç†Ã\f\u000b0,\u0000¯ÁŸ¼'Ø‘\u0018‹¼çXYY€a\u0001†\u0005Ä÷gM‘w¤×Ô¬,À°\u0000Ã\u0002®ë^û§÷qœ5Ì°\u0000Ã\u0002®ëÐ¹æ¤oNí«¨¬,À°\u0000Ã\u0002®ë°»>½^Öù\\ç†\u0003\f\u000b0,àÚ;ÒtÏDç\u0013×TV\u0016`X€a\u0001¯8×¡J¼Ç3uO+\u000b0,À°€kç:P‰µvÚË¬,À°\u0000Ã\u0002®ë0ejÝ¹á0Ã\u0002\f\u000bxÅ¹\u000eŸÂÊ\u0002\f\u000b0,À°\u0000Ã\u0002\f\u000b0,à\u0017ú\bÐÌ\u001caÐ\u0000\u0000\u0000\u0000IEND®B`‚"

but it doens't work! What I'm doing wrong?

Why not set the src to a URL directly?

SLaks
– SLaks

2013-09-03 17:58:08 +00:00
Commented Sep 3, 2013 at 17:58 — SLaks
– SLaks, Commented Sep 3, 2013 at 17:58

Oriol · Accepted Answer · 2013-09-03 18:14:48Z

4

You can use

var imageQRCODE;

$.ajax({
    url: URL,
    data: { c1: ca, c2: cli},
    success: function(image) {
        document
            .getElementsByClassName('areaQrCode')[0]
                .getElementsByTagName('img')[0]
                    .src = 'data:image/png,' + image;
    }
});

Note: I recommend you to base64 encode the image data before sending it, and then use

.src = 'data:image/png;base64,' + image;

edited Sep 3, 2013 at 18:14

answered Sep 3, 2013 at 18:01

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

4 Comments

PabloWeb18 Over a year ago

The tag img look like that <img src="�PNGIHDRdd��bKGD��IDATx��n� E�R��9�z��+�J��g�4=y,�y�/�|�~�ObX�a�X�a?�?��?��v��?��=��X��gU'��No��;�第,��Z=��|�;��3nJ� z+0,��ܳ��k��X�+z]ۺ��0,��>��G��[Y�a��zV�9��ՙ'&��Xo�97��0,l�ɾ*��aj�E�qVX�a�q��7>ڃ�N;�le�p�?�~�㬓1Tbm��0,

�w�N/���l(��0,����'ؑ����XYY�a���gM��w��Ԭ,������^���q�5̰����й�oN���,�����밻&gt;�^��\�0,��;�t�D��TV

X�a�8סJ��3uO+0,��k�:P��v�ˬ,��0ej�ݹ�0�xŹ��0,��0,��a�IEND�B`�"> and did not show me the image;

Oriol Over a year ago

@user2740851 That's why I recommend using base64

PabloWeb18 Over a year ago

i'll use base64...it's better!

Balaji Over a year ago

I have similar issue, are you able to convert into base64 and use

Collectives™ on Stack Overflow

how to convert string png to image in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related