如何在javascript中将字符串png转换为图像

Question

看看我的代码！

    var imageQRCODE;

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

这是我的HTML：

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

我的ajax调用返回一个像这样的图像字符串：

    "‰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`‚"

但它不起作用！我做错了什么？

Answer 1

您可以使用

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;
    }
});

注意：我建议您在发送之前对图像数据进行base64编码，然后使用

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