La API de OffscreenCanvas permite trabajar con un canvas en JavaScript sin tener que usar un elemento <canvas> HTML. Hoy te voy a enseñar cómo convertir ese OffscreenCanvas a una imagen codificada en base64, ya que este OffscreenCanvas no permite usar toDataURL. ...
Gracias a la librería html2pdf.js se puede crear un PDF en el navegador web usando solo JavaScript. En mi blog te enseñé a descargar ese PDF, pero ahora te enseñaré otra cosa: cómo enviar ese PDF a un servidor con PHP. Vamos a combinar varias cosas, ya que el PDF también va a llevar una firma manuscrita. Veremos: Cómo solicitar la firma del usuario Enviar esa firma adjunta en el PDF Subir el PDF a PHP Para esto, te recomiendo leer: Generando un PDF desde JS con html2pdf.js Obtener PDF de html2pdf.js y jsPDF como Blob Subir Blob de JS a PHP Solicitar firma de usuario con Canvas y JavaScript Comencemos. ...
En este artículo te voy a enseñar a rotar una imagen con HTML y JavaScript a través de canvas, de manera que podrás girar una imagen los grados que tú quieras, es decir, rotarla 90, 180, 270 o cualquier cantidad. Veremos cómo cargar una imagen, pintarla en un canvas, agregarle rotación y después hacer cosas como descargar esa imagen o enviarla al backend que puede ser con Node, C#, PHP, etcétera. ...
En el post de hoy te enseñaré a comprimir una imagen usando JavaScript al seleccionar una imagen con un input de tipo file. Con comprimir me refiero a reducir el tamaño del archivo de imagen, cambiando su calidad. Verás que podrás reducir la imagen hasta el 20 % de su calidad sin que se note (y podrás comprimirla incluso más). De este modo puedes reducir el tamaño de una imagen antes de subirla a un servidor o cosas por el estilo (cambiando su peso, no su medida en pixeles). Todo esto lo haremos del lado del cliente trabajando con JS, Canvas y URL. Yo hago este post porque estoy usando el storage de Firebase y necesito subir archivos pero no quiero que se agote mi plan gratuito. También te servirá a ti para ahorrar ancho de banda y almacenamiento en tu servidor, o tal vez solo quieras hacer una app que reduzca la calidad de las imágenes. ...
En este corto post te mostraré cómo cambiar el color de fondo o background de un canvas HTML usando JavaScript. Básicamente vamos a colorear todo el canvas o limpiar el canvas dibujando un rectángulo que tendrá las mismas dimensiones que el canvas. Al final con lo que te mostraré aprenderás a cambiar el color de un canvas con JavaScript. ...
En este post te mostraré cómo solicitar la firma a un usuario desde la web usando JavaScript, de modo que el usuario pueda firmar como si lo hiciera en una hoja de papel. Después podremos enviar esa firma al servidor, descargarla, colocarla en un documento, etcétera. Quiero que quede claro que vamos a solicitar la firma manuscrita usando programación en la web a través de un navegador. Para ello vamos a usar el canvas. Nota: una vez que la firma haya sido dibujada puedes enviarla a PHP, Java, Node, etcétera. En el ejemplo te mostraré cómo descargarla como imagen y colocarla en un documento. ...
En este post sobre programación web HTML y JavaScript te mostraré cómo hacer que el usuario pueda dibujar en un canvas usando el mouse, algo así como un paint muy básico. De esta forma vamos a permitir que el usuario pueda dibujar y pintar sobre el canvas usando el ratón. Más adelante podrías adaptar este código para cualquier otra cosa, incluso para crear un paint completo. Aquí solo te mostraré cómo permitir que el usuario dibuje en la web con un color y grosor determinado. ...
Hoy te mostraré cómo cortar o recortar una imagen con JavaScript. Es decir, darle al usuario la posibilidad de recortar una imagen seleccionando una porción de la misma. Una vez que la foto haya sido recortada con JS podemos descargarla, colocarla en un canvas, en una imagen o subirla a un servidor que ejecute PHP, Node.js, Python, etcétera. En resumen te voy a enseñar cómo hacer que el usuario recorte una foto usando JS. ...
En mi blog te he mostrado cómo descargar un canvas de HTML y JavaScript como PNG, pero no te mostré cómo hacerlo en otro formato. Por ello es que en este post te mostraré cómo descargar un canvas como imagen ya sea PNG o JPG, respetando el tipo MIME image/jpeg o image/png. ...
En este post de programación web te voy a mostrar cómo generar códigos QR desde JS o JavaScript para que puedas generar un QR desde la web. Vamos a usar una librería de terceros; verás que es muy simple crear códigos QR y tal vez esto te anime para crear tu propio generador. Te aviso que vamos a usar JavaScript puro, así que puedes portar este código para frameworks como Angular, React o Vue. ...