OCR con PHP - Detectar texto de una imagen

Extraer texto de imagen con PHP y Tesseract – OCR

En este post de programación en PHP te mostraré cómo extraer el texto de imágenes o mejor dicho cómo usar Tesseract OCR desde este lenguaje, de modo que podamos digitalizar el texto de una imagen usando PHP.

Al final esto que te muestro es un simple wrapper o una envoltura, ya que si bien vamos a procesar la imagen con PHP, internamente vamos a invocar a Tesseract.

Pero bueno, al final veremos cómo usar OCR con PHP para extraer el texto de imágenes. Obviamente te voy a dejar el ejemplo de código.

(más…)

The request client is not a secure context and the resource is in more-private address space local.

Recientemente (al momento de escribir este post) Chrome se ha actualizado para ser más seguro, y en ocasiones nos va a lanzar el error que dice:

Access to fetch at ‘dominio’ from origin ‘otro_dominio’ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.

Es un error de CORS pero no de los errores que conocemos. Este es nuevo, y dice:

The request client is not a secure context and the resource is in more-private address space local.

Así que en este post te mostraré de qué va ese error y por qué me interesa.

(más…)

Debounce con Vue

Hoy te mostraré cómo usar la función debounce con el framework Vue y obviamente el lenguaje de programación JavaScript.

Implementar esta función es un poco confuso debido a la definición de métodos dentro de los componentes de Vue y por la confusión que genera la función, ya que la misma genera otra función y solo debe ser definida una vez al inicio.

Pero bueno, vamos por partes. Verás que a partir de esto podrás usar debounce en tus componentes de Vue.

(más…)

Usar librería de NPM en Vue con webpack y require

En este post de programación con JavaScript y Vue te enseñaré a importar una librería de NPM a un componente de Vue. Si bien esto es algo muy simple, en ocasiones podemos olvidarnos o perdernos.

Por ello es que en el post de hoy te enseñaré a importar un paquete de NPM desde un componente de Vue y usarlo dentro de ese componente a través de require.

Estoy suponiendo que usas la Vue CLI con Webpack, pero incluso si no lo haces, esto podría darte una ayuda.

(más…)

Agregar útiles escolares a la lista

Software para listas de útiles escolares

En este post te mostraré un programa para llevar el registro de listas de útiles escolares. Básicamente este software gestiona listas escolares y los datos que estas llevan, por ejemplo:

  • Datos del alumno como el nombre de la escuela, grado, grupo
  • Lista de productos obtenidos de un inventario, mismos que se descuentan al entregar la lista
  • Registro de abonos en caso de que el cliente quiera obtener la lista en pagos
  • Costo adicional por forrado de las libretas, cuadernos o útiles
  • Total de la lista incluyendo costo adicional por forrado o etiquetas
  • PDF (tipo recibo o boleta) para el cliente y para la lista de útiles física
  • Saber si la lista está forrada, surtida, lista y liquidada

En resumen es un programa que lleva el registro de útiles escolares con el total monetario, abonos, productos, forrado, etiquetado, etcétera.

Por cierto, esta es una mejora del sistema gratuito para Windows que presenté hace algún tiempo. Una vez dicho esto, veamos los detalles del gestor de listas de útiles escolares.

(más…)

Solicitar firma de usuario con JavaScript y HTML en la web

Solicitar firma manuscrita 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.

Documento con firma de usuario con JavaScript - Imprimir o guardar como PDF

Documento con firma de usuario con JavaScript – Imprimir o guardar como PDF

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.

(más…)

Cambiar color de fondo a canvas con JavaScript

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.

(más…)

Por parzibyte, hace
Dibujar en canvas de JavaScript usando mouse - Prototipo de paint

Dibujar en canvas con mouse usando JavaScript

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.

(más…)

Input ligado a propiedad TypeScript con Angular

Angular – Simple binding en Input

En este post te mostraré cómo ligar un input con una variable de Angular, de manera que si la variable cambia en el input, se cambie en los demás lugares.

Y de manera similar, si la variable cambia desde otro lugar se refresque en el input. Todo esto será con Angular y con el two way binding.

Por cierto, esto que te enseñaré será muy simple por si solo necesitas un input. En caso de que quieras algo más avanzado mira los formularios con Angular.

(más…)

Plantilla HTML con aside, footer, section y header - Barra a la derecha

Plantilla HTML con header, section, aside y footer

En este post te mostraré una plantilla HTML que tiene los elementos o etiquetas header, section, aside y footer. Es un simple ejemplo con HTML y CSS para una página web.

Plantilla HTML con aside, footer, section y header - Barra a la derecha

Plantilla HTML con aside, footer, section y header – Barra a la derecha

El aside y el section tienen la misma altura, y el aside es mostrado a la derecha con un borde. Obviamente tú podrás cambiar los colores o el estilo, aquí solo te dejo una plantilla HTML muy simple con CSS puro.

(más…)

JavaScript – Generar archivo txt con Blob

En este post te mostraré cómo crear un archivo de texto en el navegador con JavaScript, escribir contenido dentro del mismo y luego forzar su descarga. Básicamente vamos a guardar un Blob con JS.

De este modo vas a poder generar un txt con JS y descargarlo. Además, con lo que te mostraré podrás generar un CSV o cualquier tipo de archivo siempre y cuando sepas estructurarlo.

Todo lo que aprenderás será aplicado del lado del cliente, así que no harás llamadas al servidor. Por cierto, usaremos Blob y URL.createObjectURL.

(más…)

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…)

Mostrar ubicación de usuario en mapa usando JavaScript, GPS y OpenLayers

Mostrar ubicación en mapa en tiempo real – Programación

En el artículo de hoy te mostraré cómo mostrar la ubicación del usuario en un mapa en tiempo real e ir actualizando el marcador del mapa conforme el usuario se mueva.

Esto puede servir para varias cosas. La más simple es mostrarle al usuario su ubicación en el mapa, pero puede enfocarse a algo tan complejo como hacer algo como Uber (enviando la ubicación a un servidor y todo eso).

Por cierto, vamos a usar JavaScript y OpenLayers (alternativa a Google Maps): tecnologías gratuitas y open source que no nos obligan a aceptar licencias ni pagar.

Obviamente esto se puede usar en dispositivos móviles Android o iOS mientras tengan un navegador web decente. Y más tarde podemos convertir la app web en una PWA para que sea algo así como una app nativa (como hice con la app de transportes).

Pero bueno, vamos a lo interesante: cómo obtener la ubicación del usuario y mostrarla en el mapa mientras se mueve.

Puedes acceder a la demostración justo ahora desde este enlace. Te debería mostrar tu ubicación actual con el símbolo de un auto.

(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…)