Guardar Imágenes Base64 en el Storage de Laravel

I have worked as a frontend and backend developer handling technologies such as Django, Ionic, Laravel, MySQL, Spring (Java), Oracle, NodeJS, Angular, VueJS with the goal of developing websites and mobile applications that offer high performance and are interactive.
You can learn more about me by visiting my website: www.stalinmaza.com
#frontend #backend #fullstack #javascript #nodejs #php
Hace unos días tuve la necesidad de guardar imágenes que enviaba desde el frontend como un dato en BASE64 para ser guardadas en el servidor debido a que IONIC al obtener la imagen desde la cámara o la galería me generaba esa salida, por lo que buscando información logre hacerlo de la siguiente manera, espero que a alguien que tenga un problema similar le pueda ayudar esta publicación.
Nos dirigimos al archivo "config/filesystems.php" y añadimos un disco, con los siguientes valores:
'images_base64' => [
'driver' => 'local', //tipo driver local-nube(s3 de amazon)
'root' => storage_path('app/images_base64'), //ruta en la carpeta storage/app y
'url' => env('APP_URL').'/storage', //ruta base storage no cambiar
'visibility' => 'public', //si se podra acceder desde el exterior
],
Hecho esto creamos la carpeta en la ruta "/storage/app/name_disk' reemplazando "name_disk" con el nombre del disco que creamos en este caso "images_base64".
Luego de esto usamos la siguiente función para obtener los datos de la imagen pasando el BASE64 como parámetro, podemos guardar esto en un helper para usarlo en otros lados pero eso es tema de otra publicación.
public function getB64Image($base64_image){
// Obtener el String base-64 de los datos
$image_service_str = substr($base64_image, strpos($base64_image, ",")+1);
// Decodificar ese string y devolver los datos de la imagen
$image = base64_decode($image_service_str);
// Retornamos el string decodificado
return $image;
}
La siguiente función nos sirve para obtener la extensión de la imagen en Base64 a la cual le pasamos la imagen en formato base64 y opcionalmente la opción full como verdadera para obtener la extensión completa, por ejemplo "image/png" ya que por defecto devuelve solo "png", en el caso de este ejemplo.
public function getB64Extension($base64_image, $full=null){
// Obtener mediante una expresión regular la extensión imagen y guardarla
// en la variable "img_extension"
preg_match("/^data:image\/(.*);base64/i",$base64_image, $img_extension);
// Dependiendo si se pide la extensión completa o no retornar el arreglo con
// los datos de la extensión en la posición 0 - 1
return ($full) ? $img_extension[0] : $img_extension[1];
}
Hecho esto podemos ya guardar en Laravel la Imagen siguiendo el ejemplo inferior:
use Illuminate\Support\Facades\Storage;
// Obtener los datos de la imagen
$img = getB64Image($image_avatar_b64);
// Obtener la extensión de la Imagen
$img_extension = getB64Extension($image_avatar_b64);
// Crear un nombre aleatorio para la imagen
$img_name = 'user_avatar'. time() . '.' . $img_extension;
// Usando el Storage guardar en el disco creado anteriormente y pasandole a
// la función "put" el nombre de la imagen y los datos de la imagen como
// segundo parametro
Storage::disk('images_base64')->put($img_name, $img);
Extra Si deseamos servir las imágenes guardadas lo podemos hacer con la siguiente función a la cual le pasamos el nombre del archivo
use Illuminate\Support\Facades\Storage;
use Illuminate\Http\Response;
public function getImageB64($filename){
//Obtener la imagen del disco creado anteriormente de acuerdo al nombre de
// la imagen solicitada
$file = Storage::disk('images_base64')->get($filename);
// Retornar una respuesta de tipo 200 con el archivo de la Imagen
return new Response($file,200);
}
Y en el frontend solo debemos llamar a la ruta de la imagen y se mostrara correctamente

