canvas

Solución a Immutable bitmap passed to canvas constructor en Android y Java

En este post te mostraré la solución a un problema de Android que dice así:

E/AndroidRuntime: FATAL EXCEPTION: main
Process: me.parzibyte.controldeentregas, PID: 4817
java.lang.IllegalStateException: Immutable bitmap passed to Canvas constructor at android.graphics.Canvas.<init>(Canvas.java:131)

El error es muy claro: estamos pasando un bitmap inmutable al constructor de Canvas; hay que hacer el Bitmap mutable.

Leer más »Solución a Immutable bitmap passed to canvas constructor en Android y Java

Códigos de barras con JavaScript - Productos

Códigos de barras con JavaScript usando JSBarcode

Códigos de barras con JavaScript

En este post te voy a mostrar algunos ejemplos y usos de la librería JsBarcode para generar códigos de barras en elementos HTML usando JavaScript.

Vamos a generar códigos de barras con JavaScript en 3 elementos:

  1. SVG
  2. Canvas
  3. Imagen

Si deseas mantener la calidad del código de barras, recomiendo que uses el formato SVG.

Nota: esta librería no necesita otras librerías o dependencias, funciona con JavaScript puro y por lo tanto se puede usar en cualquier proyecto de JavaScript.

Leer más »Códigos de barras con JavaScript usando JSBarcode

Dibujar figuras geométricas en Canvas con JavaScript

En este post recopilo algunos ejemplos de figuras geométricas dibujadas sobre un lienzo o canvas (elemento de HTML5) usando el lenguaje de programación JavaScript.

Las figuras que veremos son:

  1. Rombo
  2. Romboide
  3. Trapecio
  4. Trapezoide
  5. Pentágono
  6. Hexágono
  7. Heptágono

Nota: recuerda que ya vimos cómo dibujar triángulos, y también cómo dibujar rectángulos o cuadrados.

Para dibujar las figuras vamos a unir unas simples líneas con lineTo.

Leer más »Dibujar figuras geométricas en Canvas con JavaScript

Convertir HTML a imagen con html2canvas – Tomar screenshot de página web

En este post voy a explicar y a dar algunos ejemplos para convertir el contenido de una página web a una imagen, es decir, tomarle una “captura de pantalla” a la página web usando únicamente JavaScript del lado del cliente y la maravillosa librería de html2canvas.

Voy a mostrar cómo adjuntar el elemento canvas al documento, descargar la imagen, ignorar algunos elementos al tomar la captura de pantalla, respetar los estilos CSS y poner el resultado sobre un canvas existente.

HTML convertido a imagen con html2canvas

HTML convertido a imagen con html2canvas

La imagen anterior fue generada por esta librería, respetando estilos de la tabla, imágenes, colores, fuentes y más.

Leer más »Convertir HTML a imagen con html2canvas – Tomar screenshot de página web

Convertir canvas a imagen PNG para descargarla

Los elementos canvas son algo muy útil en HTML, son un lienzo en donde se pueden dibujar varias cosas.

Al generar un contenido en un canvas el mismo puede ser descargado por el usuario, ¿pero qué pasa si queremos agregar más funcionalidad y agregar un botón para descargar el elemento como imagen?

Precisamente eso veremos hoy: cómo convertir el contenido de un canvas a una imagen PNG y hacer que la misma se descargue, usando JavaScript.

Leer más »Convertir canvas a imagen PNG para descargarla

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.

Leer más »Tomar foto de cámara web con JavaScript y descargarla como imagen