Bienvenido al blog de Parzibyte. Vas a encontrar tutoriales y tips de programación, bases de datos, redes, electrónica e informática general. Ejemplos de código, aplicaciones gratuitas y open source
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:
SVG
Canvas
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.
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.
Siguiendo con los tutoriales sobre el elemento canvas de HTML5 en este post vamos a ver cómo escribir texto sobre el canvas, o mejor dicho, dibujar texto sobre el canvas.
Vamos a personalizar la fuente y el color, así como las coordenadas en donde el texto comienza.
Los métodos que veremos son strokeText y fillText.
En este post te voy a enseñar a dibujar líneas (de diferente color) en un elemento canvas de HTML usando los métodos moveTo y lineTo, además de cambiar el grosor de las mismas.
Todo esto lo haremos con JavaScript y el elemento canvas de HTML.
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
La imagen anterior fue generada por esta librería, respetando estilos de la tabla, imágenes, colores, fuentes y más.
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.
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
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.
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:
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
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.
