Web

Как сохранить изображение PNG на стороне сервера из URI данных base64

Я использую инструмент JavaScript «Canvas2Image» компании Nihilogic для преобразования рисунков холста в изображения PNG. Теперь мне нужно превратить те строки base64, которые генерирует этот инструмент, в реальные файлы PNG на сервере, используя PHP.

Короче говоря, в настоящее время я создаю файл на стороне клиента с помощью Canvas2Image, затем извлекаю данные в кодировке base64 и отправляю их на сервер с помощью AJAX:

// Создает файл изображения

var image = Canvas2Image.saveAsPNG(canvas, true);   

image.id  = "canvasimage";

canvas.parentNode.replaceChild(image, canvas);

var url     = 'hidden.php',

data        = $('#canvasimage').attr('src');

$.ajax({ 

    type: "POST", 

    url: url,

    dataType: 'text',

    data: {

        base64data : data

    }

});

На этом этапе "hidden.php" получает блок данных, который выглядит как data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAABE ...

С этого момента я в значительной степени в тупике. Из того, что я прочитал, я полагаю, что я должен использовать функцию PHP imagecreatefromstring , но я не уверен, как на самом деле создать фактическое изображение PNG из строки в кодировке base64 и сохранить его на моем сервере. Пожалуйста, помогите!

 

Ответ 1

Вам нужно извлечь данные изображения base64 из этой строки, декодировать их, а затем вы можете сохранить их на диск; вам не нужен GD, поскольку он уже является png.

$data = 'data:image/png;base64,AAAFBfj42Pj4';

list($type, $data) = explode(';', $data);

list(, $data)      = explode(',', $data);

$data = base64_decode($data);

file_put_contents('/tmp/image.png', $data);

 И однострочный вариант:

$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));

 Эффективный метод извлечения, декодирования и проверки ошибок:

if (preg_match('/^data:image\/(\w+);base64,/', $data, $type)) {

    $data = substr($data, strpos($data, ',') + 1);

    $type = strtolower($type[1]); // jpg, png, gif

    if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {

        throw new \Exception('недопустимый тип изображения');

    }

    $data = str_replace( ' ', '+', $data );

    $data = base64_decode($data);

    if ($data === false) {

        throw new \Exception('ошибка декодирования base64_decode');

    }

} else {

    throw new \Exception('не сопоставлен URI данных с данными изображения');

}

file_put_contents("img.{$type}", $data);

 

 

Ответ 2

Мне пришлось заменить пробелы на символы плюса, str_replace(' ', '+', $img); чтобы это заработало.

Вот полный код:

$img = $_POST['img']; // Your data 'data:image/png;base64,AAAFBfj42Pj4';

$img = str_replace('data:image/png;base64,', '', $img);

$img = str_replace(' ', '+', $img);

$data = base64_decode($img);

file_put_contents('/tmp/image.png', $data);

Надеюсь, это поможет.

 

Ответ 3

Этот код работает для меня:

<?php

define('UPLOAD_DIR', 'images/');

$image_parts       = explode(";base64,", $_POST['image']);

$image_type_aux = explode("image/", $image_parts[0]);

$image_type         = $image_type_aux[1];

$image_base64    = base64_decode($image_parts[1]);

$file = UPLOAD_DIR . uniqid() . '.png';

file_put_contents($file, $image_base64);

?>

 

Ответ 4

Я сделал рабочий пример для облегчения понимания.

imagesaver("data:image/jpeg;base64,/9j/4AAQSkZJ"); // base64 данные

function imagesaver($image_data){

    list($type, $data) = explode(';', $image_data); // данные для последующей проверки и валидации

    if (preg_match('/^data:image\/(\w+);base64,/', $image_data, $type)) {

        $data = substr($data, strpos($data, ',') + 1);

        $type = strtolower($type[1]); // jpg, png, gif

        if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {

            throw new \Exception('недопустимый тип изображения');

        }

        $data = base64_decode($data);

        if ($data === false) {

            throw new \Exception('ошибка декодирования base64_decode');

        }

    } else {

        throw new \Exception('не совпадает URI данных с данными изображения');

    }

    $fullname = time().$type;

    if(file_put_contents($fullname, $data)){

        $result = $fullname;

    }else{

        $result =  "error";

    }

    /* возвращает имя изображения, если оно сохранено успешно 

    или вернет ошибку при неудачном сохранении изображения. */

    return $result; 

}

 

Схожие статьи

Как бесплатно проверить доступность сайта из разных частей мира?
Web

Как бесплатно проверить доступность сайта из разных частей мира?

Самые красивые сайты мира по дизайну: выбираем топ-10 лучших сайтов
Web

Самые красивые сайты мира по дизайну: выбираем топ-10 лучших сайтов

Web

Как восстановить сериализованную строку, которая была повреждена из-за неправильной длины счетчика байтов

Web

Потеря PHP сеанса после перенаправления