День: 03.04.2024

Довольно типичная задача — нужда чтобы изображение полученное в виде данных при помощи например запроса ajax (картинка из base64), отобразилась на веб странице. Решение простое, и даже не требует никаких перекодировок, так как, движёк браузера уже позволяет отображать такие картинки, достаточно указать ему формат данных источника. Например так:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

Ну а если задачу рассматривать в комплексном виде (картинка из base64), то готовый код с запросом данных для отображения картинки может выглядеть так:

<img id='base64image'>
<script>       
        $.ajax({
            type: 'POST',
            url: '/getdata.php',
            success: function(data){
               document.getElementById('base64image').src = data:image/png;base64,${data.image.content};
            },
            dataType: 'json',
        });
</script>