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.
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.
Lo importante hasta aquí es que ya tenemos un canvas y tenemos un dibujo en el mismo. Ahora veamos cómo enviarlo.
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í:
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.
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
.
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.
El código completo del lado del cliente queda así:
Y del servidor así:
Si te gustan estos lenguajes te invito a ver más sobre PHP y JavaScript en mi blog.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.
Ver comentarios
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
Me agrada saber que funcione. Recuerde que si tiene algún problema puede contactarme en https://parzibyte.me/#contacto
Saludos!