En el post de hoy te mostraré una cosa sencilla pero muy útil: cómo enviar un canvas de HTML a PHP usando JavaScript, para guardar ese canvas como imagen.
Cuando digo que es útil es porque yo creo que canvas nos da varias posibilidades de trabajar con imágenes o con el canvas en sí, y gracias a lo que te mostraré podrás guardar el resultado en el servidor para cualquier cosa.
Se me ocurre que por ejemplo podrías tomar una foto de una credencial de identificación, recortarla y después guardarla con PHP.
Preparando el canvas
El canvas o lienzo de HTML puede ser de cualquier cosa. Yo simplemente le dibujaré una figura geométrica, pero te repito que el contenido del mismo puede ser cualquier cosa.
const ALTURA_CANVAS = 200,
ANCHURA_CANVAS = 400;
const $btnEnviar = document.querySelector("#btnEnviar");
const $canvas = document.querySelector("#canvas");
// Simple función que dibuja algo en el canvas, solo de ejemplo
// Tomado de: [https://parzibyte.me/blog/posts/dibujar-figuras-geometricas-canvas-javascript/](https://parzibyte.me/blog/posts/dibujar-figuras-geometricas-canvas-javascript/)
const dibujarEnCanvas = () => {
// Obtener el elemento del DOM
$canvas.width = ANCHURA_CANVAS;
$canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = $canvas.getContext("2d");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#D4E157";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// Esquina superior izquierda
contexto.moveTo(35, 5);
// Línea recta superior
contexto.lineTo(95, 5);
// Esquina central derecha
contexto.lineTo(125, 55);
// Esquina inferior derecha
contexto.lineTo(95, 105);
// Línea recta inferior
contexto.lineTo(35, 105);
// Esquina central izquierda
contexto.lineTo(5, 55);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
}
Lo importante hasta aquí es que ya tenemos un canvas y tenemos un dibujo en el mismo. Ahora veamos cómo enviarlo.
Enviar canvas con JavaScript
En el código anterior te mostré cómo dibujarle algo al canvas y también definí un botón que enviará el canvas como imagen a PHP. Entonces queda así:
$btnEnviar.onclick = async () => {
// Convertir la imagen a Base64 y ponerlo en el enlace
const data = $canvas.toDataURL("image/png");
const fd = new FormData();
fd.append("imagen", data); // Se llama "imagen", en PHP lo recuperamos con $_POST["imagen"]
const respuestaHttp = await fetch("imagen.php", {
method: "POST",
body: fd,
});
const nombreImagenSubida = await respuestaHttp.json();
console.log("La imagen ha sido enviada y tiene el nombre de: " + nombreImagenSubida);
};
En la línea 3 convertimos el canvas a imagen PNG (también se puede JPG), luego creamos un nuevo FormData para enviar la imagen codificada y lo enviamos usando fetch a nuestro servidor con Apache y PHP.
PHP nos debe responder con el nombre de la imagen que se acaba de subir, y en ese caso lo mostramos en la consola.
Recibir imagen en PHP
Ahora en el lado del servidor tendremos la imagen en base64 o base 64, como sea que se diga. Le removemos la parte que dice “image/png” y escribimos el contenido decodificado (con base64_decode) dentro de un archivo.
Ten en cuenta que si en el paso anterior enviaste la imagen como jpg entonces debes remover la parte que dice image/jpeg.
<?php
$imagenCodificada = $_POST["imagen"];
$imagenCodificadaLimpia = str_replace("data:image/png;base64,", "", $imagenCodificada);
$imagenDecodificada = base64_decode($imagenCodificadaLimpia);
$nombreImagenGuardada = "imagen_" . uniqid() . ".png";
file_put_contents($nombreImagenGuardada, $imagenDecodificada);
echo json_encode($nombreImagenGuardada);
Al final imprimimos el nombre de la imagen guardada con PHP codificada como JSON, el cliente la va a recibir y después mostrará el nombre en la consola.
Poniendo todo junto
El código completo del lado del cliente queda así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enviar canvas de JavaScript a PHP</title>
</head>
<body>
<canvas id="canvas"></canvas>
<br>
<button id="btnEnviar">Enviar a PHP</button>
<script>
const ALTURA_CANVAS = 200,
ANCHURA_CANVAS = 400;
const $btnEnviar = document.querySelector("#btnEnviar");
const $canvas = document.querySelector("#canvas");
// Simple función que dibuja algo en el canvas, solo de ejemplo
// Tomado de: [https://parzibyte.me/blog/posts/dibujar-figuras-geometricas-canvas-javascript/](https://parzibyte.me/blog/posts/dibujar-figuras-geometricas-canvas-javascript/)
const dibujarEnCanvas = () => {
// Obtener el elemento del DOM
$canvas.width = ANCHURA_CANVAS;
$canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = $canvas.getContext("2d");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#D4E157";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// Esquina superior izquierda
contexto.moveTo(35, 5);
// Línea recta superior
contexto.lineTo(95, 5);
// Esquina central derecha
contexto.lineTo(125, 55);
// Esquina inferior derecha
contexto.lineTo(95, 105);
// Línea recta inferior
contexto.lineTo(35, 105);
// Esquina central izquierda
contexto.lineTo(5, 55);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
}
$btnEnviar.onclick = async () => {
// Convertir la imagen a Base64 y ponerlo en el enlace
const data = $canvas.toDataURL("image/png");
const fd = new FormData();
fd.append("imagen", data); // Se llama "imagen", en PHP lo recuperamos con $_POST["imagen"]
const respuestaHttp = await fetch("imagen.php", {
method: "POST",
body: fd,
});
const nombreImagenSubida = await respuestaHttp.json();
console.log("La imagen ha sido enviada y tiene el nombre de: " + nombreImagenSubida);
};
dibujarEnCanvas();
</script>
</body>
</html>
Y del servidor así:
<?php
$imagenCodificada = $_POST["imagen"];
$imagenCodificadaLimpia = str_replace("data:image/png;base64,", "", $imagenCodificada);
$imagenDecodificada = base64_decode($imagenCodificadaLimpia);
$nombreImagenGuardada = "imagen_" . uniqid() . ".png";
file_put_contents($nombreImagenGuardada, $imagenDecodificada);
echo json_encode($nombreImagenGuardada);
Si te gustan estos lenguajes te invito a ver más sobre PHP y JavaScript en mi blog.