Enviar canvas de JavaScript a PHP

Canvas enviado como imagen desde JavaScript a PHP

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/2019/07/16/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

Canvas enviado como imagen desde JavaScript a PHP

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/2019/07/16/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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Siguiente Código fuente de Sublime POS 3 »

Anterior « Recortar imagen con JavaScript

Ver comentarios

Jaime dice:

marzo 8, 2022 en 11:29 am

Funciona de maravilla. Mil gracias por compartirlo.
Estoy haciendo pruebas para usar un ipad para que me firmen un documento pero en el iPad no funciona, cuando intento firmar con el dedo lo detecta como un scroll
- parzibyte dice:
  
  marzo 8, 2022 en 11:59 am
  
  Me agrada saber que funcione. Recuerde que si tiene algún problema puede contactarme en https://parzibyte.me/#contacto
  Saludos!