php - tag - Cómo guardar una imagen PNG desde el servidor, desde una cadena de datos base64

mostrar imagen base64 javascript

Question

Estoy usando la herramienta de JavaScript "Canvas2Image" de Nihilogic para convertir dibujos de lienzo en imágenes PNG. Lo que necesito ahora es convertir esas cadenas base64 que genera esta herramienta, en archivos PNG reales en el servidor, usando PHP.

En resumen, lo que estoy haciendo actualmente es generar un archivo en el lado del cliente usando Canvas2Image, luego recuperar los datos codificados en base64 y enviarlos al servidor usando AJAX:

// Generate the image file
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
    }
});

En este punto, "hidden.php" recibe un bloque de datos que se parece a los datos: image / png; base64, iVBORw0KGgoAAAANSUhEUgAABE ...

Desde este momento, estoy bastante perplejo. Por lo que he leído, creo que se supone que debo usar la función imagecreatefromstring de PHP, pero no estoy seguro de cómo crear una imagen PNG real a partir de la cadena codificada en base64 y almacenarla en mi servidor. Por favor ayuda!

Answer 1

Bueno, su solución anterior depende de que la imagen sea un archivo jpeg. Para una solución general que utilicé

$img = $_POST[''image''];
$img = substr(explode(";",$img)[1], 7);
file_put_contents(''img.png'', base64_decode($img));

Answer 2

Este código funciona para mí, verifique el siguiente código:

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

Answer 3

Necesita extraer los datos de imagen de base64 de esa cadena, decodificarla y luego puede guardarla en el disco, no necesita GD ya que es una 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);

Y como un trazador de líneas:

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

Un método eficiente para extraer, decodificar y verificar errores es:

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(''invalid image type'');
    }

    $data = base64_decode($data);

    if ($data === false) {
        throw new /Exception(''base64_decode failed'');
    }
} else {
    throw new /Exception(''did not match data URI with image data'');
}

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

Answer 4

Prueba esto:

file_put_contents(''img.png'', base64_decode($base64string));

file_put_contents docs

Answer 5

Tomada la idea @ dre010, la extendí a otra función que funciona con cualquier tipo de imagen: PNG, JPG, JPEG o GIF y le da un nombre único al nombre del archivo

La función separa los datos de imagen y el tipo de imagen

function base64ToImage($imageData){
    $data = ''data:image/png;base64,AAAFBfj42Pj4'';
    list($type, $imageData) = explode('';'', $imageData);
    list(,$extension) = explode(''/'',$type);
    list(,$imageData)      = explode('','', $imageData);
    $fileName = uniqid().''.''.$extension;
    $imageData = base64_decode($imageData);
    file_put_contents($fileName, $imageData);
}

Answer 6

Tuve que reemplazar espacios con los símbolos más str_replace('' '', ''+'', $img); para hacer que esto funcione

Aquí está el código completo

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

Espero que ayude.

Answer 7

Una solución lineal.

$base64string = ''data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7'';
file_put_contents(''img.png'', base64_decode(explode('','',$base64string)[1]));

Answer 8

Vale la pena decir que el tema discutido está documentado en RFC 2397 - El esquema de URL de "datos" ( https://tools.ietf.org/html/rfc2397 )

Debido a esto, PHP tiene una forma nativa de manejar dichos datos: "data: stream wrapper" ( http://php.net/manual/en/wrappers.data.php )

Para que pueda manipular fácilmente sus datos con flujos de PHP:

$data = ''data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7'';

$source = fopen($data, ''r'');
$destination = fopen(''image.gif'', ''w'');

stream_copy_to_stream($source, $destination);

fclose($source);
fclose($destination);

Answer 9

prueba esto...

$file = $_POST[''file'']; //your data in base64 ''data:image/png....'';
$img = str_replace(''data:image/png;base64,'', '''', $file);
file_put_contents(''img/imag.png'', base64_decode($img));