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.

Continue reading…

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.

Continue reading…

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.

Continue reading…

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.

Continue reading…

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.

Continue reading…

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.

Continue reading…

Python: agregar pie de página a PDF

Introducción

Ya hemos trabajado anteriormente con Python para muchas cosas. Hoy veremos cómo poner un pie de página a cualquier documento PDF.

Veremos cómo poner un texto, número o cualquier mensaje que queramos.

Esto funciona cuando queremos poner nuestro nombre a algún documento, o modificar un documento PDF que no podemos editar.

El proceso es realmente sencillo, sólo necesitamos Python y algunas librerías que instalaremos con Pip. Recuerda que si no tienes instalado pip o Python, aquí hay un excelente tutorial.

Librerías o requisitos

Como siempre, necesitamos Python y pip. Aquí un tutorial.

Una vez que tengamos todo instalado, necesitamos 2 librerías más: PyPDF2 y ReportLab. Más abajo veremos cómo instalarlas.

Instalar PyPDF2

Ejecutamos lo siguiente en la línea de comandos:

pip install PyPDF2

Instalar ReportLab

Ejecutamos lo siguiente:

pip install reportlab

Ahora sí estamos listo

Archivo de ejemplo

Para ejemplificar lo que aquí se verá, se utilizará un PDF normal que es de uno de mis posts:

post

Poner mensaje en pie de página

Para mí, esta opción es la más útil. Podría servir para poner nuestra “marca de agua” en los documentos que generemos. En fin, podemos poner cualquier mensaje deseado.

from PyPDF2 import PdfFileWriter, PdfFileReader
import io
from reportlab.pdfgen import canvas
from reportlab.lib.pagesizes import letter


nombre_pdf_original = "post.pdf" # Cambia aquí el nombre de tu documento original
nombre_pdf_salida = "post_con_mensaje.pdf" # Cambia aquí el nombre del PDF de salida
mensaje = "Este es un pie de página :)"
packet = io.BytesIO()

mi_canvas = canvas.Canvas(packet, pagesize=letter)

"""
    También podemos cambiar las coordenadas del mensaje.
    La posición (0, 0) es la esquina inferior izquierda
    por eso es que nuestro mensaje sale tan cerca a 
    dicho lugar
"""
mi_canvas.drawString(5, 5, mensaje)
mi_canvas.save()

packet.seek(0)
pdf_con_pie = PdfFileReader(packet)

pdf_existente = PdfFileReader(open(nombre_pdf_original, "rb"))
output = PdfFileWriter()

# Iterar desde 0 hasta el número de páginas de nuestro documento
numero_de_paginas = pdf_existente.getNumPages()
for numero in range(0, numero_de_paginas):
    page = pdf_existente.getPage(numero)
    page.mergePage(pdf_con_pie.getPage(0))
    print("Agregando mensaje \"{}\" a la página {} de {}".format(mensaje, numero + 1, numero_de_paginas))
    output.addPage(page)

outputStream = open(nombre_pdf_salida, "wb")
output.write(outputStream)
outputStream.close()

El código se explica por sí mismo. Simplemente creamos un documento PDF temporal, con el mensaje que pusimos y luego lo “combinamos” con el original.

Así vamos haciendo por cada página y al final escribimos el contenido del stream en el archivo de salida.

Si ejecutamos el código se verá algo así:

Agregando pie de página a un documento PDF de ejemplo

Agregando pie de página a un documento PDF de ejemplo

El resultado es este:

post_con_mensaje

Sencillo pero muy útil. Tal vez más tarde podríamos agregar una interfaz gráfica para facilitar el uso de este programa. Incluso podríamos empaquetar esto.

Conclusión

Te recomiendo leer la documentación oficial de ReportLab aquí, así como la de PyPDF2 aquí. Igualmente te invito a leer otros tutoriales de Python.