Base64 в png формат?

Question

[Andrew]

Всем привет! Скажите пожалуйста как перевести base64 формат в png! Сейчас у меня картинка генерируется canvas'ом и получается что-то такое "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA04AAANOCAYAAAAmoFyBAAAgAElEQ…S8uUR/xbqQn7fiWSGzhXy2kmfiOUF3AVx1WogxSZhHtPP/AP26QQ3vAmVIAAAAAElFTkSuQmCC"!
Нужно эту картинку шарить в соцсети, то есть получить нормальный url. Скажите пожалуйста как это лучше сделать? Буду очень благодарен!)

Answer 1

[Ernest Faizullin]

если пользоваться только js, то можно подключить плагин JavaScript-Canvas-to-Blob и сохранить канвас в png файл
<script src="js/canvas-to-blob.min.js"></script>
js:

canvas.toBlob(function(blob) {
    saveAs(blob, "image.png");
}, "image/png");

но вроде как раньше это не работало в Safari, хотя у них в описании написано что Safari +6.0, не знаю как сейчас у них обстоит дело с сафари, лучше сохранить png файл, отправив POST запросом base64 строку на php обработчик

$base64string = $_POST['base64string'];
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $base64string));
file_put_contents('image.png', $data);

Answer 2

[Stalker_RED]

Сконвертировать dataURI в блоб, отправить аяксом на сервер, там сохранить как png, вернуть ссылку.
конвертировать как-то так:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

© stackoverflow.com/questions/4998908/convert-data-u...