Recortar imagen con PHP y Cropper JS

Recortar foto con PHP

Hoy voy a enseñarte a recortar una foto con PHP dando al usuario la posibilidad de recortar una foto y luego guardarla en el servidor con PHP.

De este modo vamos a darle al usuario la opción de recortar una imagen y guardar el resultado en PHP. Luego ya puedes ligar esa foto o imagen a una base de datos, alojarla en el servidor, usarla para crear otra imagen, etcétera.

Usaremos Cropper.js en el lado del cliente y después enviaremos el resultado a PHP. Con esto vamos a ahorrar recursos pues el recorte de la foto se hará del lado del cliente pero al final prácticamente vamos a recortar la foto con PHP.

(más…)

Canvas enviado como imagen desde JavaScript a PHP

Enviar canvas de 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.

(más…)

Recortar imagen con JavaScript - Descargar foto cortada

Recortar imagen con JavaScript

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.

(más…)

Foto tomada con Python y Flask

Python: acceder a cámara web con OpenCV y Flask

Hace tiempo te mostré cómo tomar una foto con la webcam usando Python, pero desde la terminal y sin una previsualización. Ahora te mostraré cómo stremear la cámara web en tiempo real a tu navegador web, tomar una foto y descargarla, o tomar una foto y guardarla en el servidor.

Acceder a la cámara web con Flask, OpenCV y Python

Acceder a la cámara web con Flask, OpenCV y Python

Para ver la cámara en tiempo real y exponerla para que un navegador web la consuma vamos a usar Flask. Y para acceder a la cámara usaremos OpenCV.

Al final tendrás la opción de descargar la foto o guardarla en el servidor. De este modo igualmente podrías ver una cámara web a través de la red, pues se va a crear un servidor web en donde la misma estará expuesta.

(más…)

PHP: tomar foto con cámara y guardar en MySQL

En este post te mostraré cómo tomar una foto con la cámara web usando JavaScript; para más tarde enviarla a PHP y guardarla en una base de datos.

Recuerda que ya anteriormente vimos cómo hacer lo mismo pero guardando la foto en el disco duro, esto no es más que una modificación a lo que aparece en ese post.

Recomiendo encarecidamente que leas el post que menciono, pues aquí solo cambia la parte del guardado de la foto.

(más…)

6 - Leer código de barras de paquete con cámara en App de entregas

App de entregas Android con sincronización web y GPS

En este post te mostraré una app de entrega de paquetes para Android que programé hace algún tiempo en Java, la cual sirve para dar seguimiento a entregas de paquetes o pedidos, sincronizada con un servidor para bajar y subir las entregas pendientes en cada terminal.

Se puede decir que es, a baja escala, algo similar a lo que hace DHL, Estafeta o esos servicios que entregan paquetes (no sé bien el nombre de ese campo).

La información se guarda en una base de datos SQLite local, y posteriormente se envía a un servidor para sincronizarse.

Para llevar un seguimiento de los paquetes se escanea el código de barras usando la cámara del teléfono inteligente, o escribiendo el código manualmente.

(más…)

Tomar foto con JavaScript y descargarla como imagen PNG

Tomar foto de cámara web con JavaScript y descargarla como imagen

En mi blog he hecho varios posts sobre tomar fotos con la cámara web desde JavaScript, para enviarlas a PHP; pero nunca he hecho un ejemplo sin usar PHP.

Es por ello que hoy voy a explicar cómo tomar una foto de la cámara web (igualmente de la cámara trasera o delantera en los dispositivos compatibles) y guardarla o descargarla directamente como archivo, sin usar código del servidor.

Tomar foto con JavaScript y descargarla como imagen PNG

Tomar foto con JavaScript y descargarla como imagen PNG

El código para tomar la foto funciona en varios dispositivos con un navegador actualizado, desde teléfonos y tabletas Android, iPads y más.

(más…)

JavaScript: tomar foto con cualquier cámara (frontal y trasera)

Introducción

Ya estamos aquí con un tercer post sobre tomar fotos con JavaScript. Este tutorial ofrece una nueva característica y es la de dar al usuario elegir cuál cámara usar para tomar la foto. En los posts anteriores únicamente tomaba de la cámara por defecto, y en algunos navegadores (Chrome, cof cof) no permite cambiar la cámara con la que se toma.

Afortunadamente eso no importa, porque podemos obtener la lista de dispositivos y cambiarlos como se nos dé la gana.

Por cierto, este post está más actualizado; usa constantes, querySelector y otras cosas que los anteriores no. Si bien esto no afecta el funcionamiento, nos da un código más bonito y entendible.

Pero basta de hablar, que hablar es de mal gusto; vamos a ver el código.

(más…)

Tomar captura o foto de nuestro código fuente con VSCode y Polacode

Introducción

Con Polacode podemos tomar una foto a nuestro código fuente. Su nombre viene de combinar “Polaroid” y “Code”, Polaroid creo que es una marca de cámaras o algo así.

El código fuente, cuando es escrito correctamente, es bello. Es como leer un poema, como ver una obra de arte que puede ser entendida por casi cualquier persona.

A veces es necesario tomar captura de nuestro código, ya sea para exponerlo, mandarlo o cosas así que no logramos copiando y pegando.

Además, al tomarle captura o convertirlo en imagen conserva los colores, las indentaciones y todo lo demás; en pocas palabras conserva su belleza.

Veamos entonces cómo tomar una foto de nuestro código, y no me refiero a una foto con una cámara real, ni tomando captura, sino con una extensión que tiene una de las cosas buenas que ha inventado Microsoft aparte de Office: Visual Studio Code.

Por cierto, anteriormente ya vimos cómo imprimir nuestro código fuente conservando colores, sintaxis y esas cosas.

(más…)

Tomar foto de webcam con Python

Introducción

Ya vimos cómo tomar una foto de la cámara web o de cualquier dispositivo utilizando Javascript. En aquel post, guardábamos la foto con PHP. Hoy veremos cómo tomar una foto con Python y guardarla en el sistema.

Nota: te invito a leer cómo tomar la foto y guardarla en PHP.

Nota 2: ya existe otra versión en donde usamos Flask para mostrar una previsualización y exponer la cámara en un servidor web.

(más…)

Tomar foto con Javascript y cámara para guardarla en servidor PHP

Introducción

Nota: ya hay una versión 3 de este código. En ese nuevo post explico cómo dar la posibilidad de que el usuario cambie la cámara, además de que introduzco otras mejoras y actualizaciones. Míralo aquí.

Nunca imaginé que algún día se podría tomar una foto y guardarla en un servidor usando código nativo de Javascript y la cámara del dispositivo. Eso abre un mundo de posibilidades que permite a nuestras aplicaciones tener más características.

Hoy mostraré aquí un pequeño tutorial que nos permitirá tomar una simple foto y subirla a un servidor que tendrá PHP. No se usará ningún framework, ni de Javascript ni de PHP.

Nota: debido a que vamos a tomar una foto con la cámara, debemos servir nuestra app en localhost (para hacer pruebas locales) o en un servidor con https. Es decir, nuestro código debe estar en un servidor con un certificado SSL, o corriendo en nuestra máquina.

Si te gusta programar en Python, te invito a leer cómo tomar una foto de la cámara web, utilizando Python.

(más…)