Mandar código de barras por email

La primera solución que puedes probar es utilizar JavaScript para convertir la imagen generada en el <canvas> en una imagen PNG normal y corriente.

Suponiendo que el código de barras lo tengas generado así:

<canvas id="codigoBarras" width="200px" height="75px">

Lo primero que tienes que hacer es crear un nuevo elemento para guardar dentro la imagen generada:

<div id="imagenCodigoBarras">
</div>

Y ahora con este código JavaScript puedes cover el contenido del <canvas> y transformarlo en una imagen PNG cuyo contenido pasas a la imagen mediante una cadena de texto codificada en Base64:

var imagenOriginal = convertImageToCanvas(
    document.getElementById('codigoBarras')
);
 
var imagen = new Image();
imagen.src = imagenOriginal.toDataURL('image/png');
 
document.getElementById('imagenCodigoBarras').appendChild(imagen);

Aunque este código funcionaría bien en cualquier navegador moderno, seguramente algunos clientes de correo electrónico no ejecuten bien el código. Así que la solución alternativa que se me ocurre es que crees un simple servicio en el backend de tu sitio web que genere códigos de barras en forma de imágenes.

Buscando por internet he encontrado el siguiente ejemplo de sitio al que puedes indicarle los datos básicos del código a generar y te devuelve una imagen:

http://www.barcodesinc.com/generator/image.php?code=123456789&style=197&type=C128B&width=200&height=75&xres=1&font=3

Aunque podrías utilizar ese servicio para generar los códigos, no te aconsejo depender de terceros para algo tan importante.

@javiereguiluz

29 octubre 2014, 8:17

Gracias por tu tiempo. Por el momento ocupa la segunda opción. No he podido obtener la variable de la imagen. Te muestro mi código.

Con esto genera por automático el código de barras

$(document).ready(function(){
  $('#registerBarcode').barcode(
    "<?php echo $result ?>", "code128", {barWidth:1,barHeight:60, output:"canvas"}
  );
});

Se muestra con el <canvas> como dijiste:

<canvas id="registerBarcode" width="270" height="80"></canvas>

Y cuando lo envío por correo, uso un <form> y el actions hace la conexión de la clase partial una trae la información y la otra es la que muestro.

Este es mi script completo.

// código javascript
<script>
var sample = document.getElementById('registerBarcode');
var imagenOriginal = convertImageToCanvas(sample); 
$(document).ready(function(){
  $('#registerBarcode').barcode("<?php echo $result ?>","code128",{barWidth:1,barHeight:60, output:"canvas"});
});
 
function imagen (imagenOriginal ){
  var imagen = new Image();    
  imagen.src = imagenOriginal.toDataURL("image/png");
  document.getElementById('imagenCodigoBarras').appendChild(imagen);
});
</script>

Gracias por tu ayuda.

@wacomaniaco

31 octubre 2014, 17:46

El problema es que los clientes de correo electrónico y los servicios online de correo electrónico son lamentables en comparación con los navegadores modernos. Si utilizas cualquier cosa dinámica o un poco moderna, vas a tener problemas. En esta página puedes leer artículos muy buenos sobre lo que soporta cada sistema de correo electrónico.

En mi opinión, las dos opciones que te quedan si tienes que enviar el código de barras si o sí serían las siguientes:

• Hacer una pequeña aplicación en el backend para generar imágenes con el código de barras. Luego en el email simplemente tienes que poner un enlace a esa aplicación y todo funcionará bien ... excepto si el email bloquea las imágenes, en cuyo caso el usuario no verá nada.
• Comentabas al principio que tu aplicación envía los datos de una compra junto con el código de barras. Si es esencial que toda la información se vea bien en cualquier sistema de correo electrónico, podrías crear un archivo PDF muy simple con los datos de la compra y el código de barras y adjuntarlo en el email. Por supuesto esto te va a costar un buen rato, pero tendrás la seguridad de que todos los datos le llegan bien al usuario y se visualizan sin problemas.

@javiereguiluz

2 noviembre 2014, 18:31

Muchas Gracias Javier. Estoy usando la 1° opción.

La opción de mandar crear un archivo PDF lo pensé antes de mandar correo electrónico pero tenia problemas al generarlo con las librerías fpdf. EL la librería FPDF viene en una carpeta saque las librerías y las coloque en una carpeta que esta en Proyecto/web/js/ luego la coloque completa y no reconocía la librerías también la coloque dentro del modulo en el /templates y no generaba el pdf fue por eso que mi segunda opción fue el correo.

Alguna idea de como poder generar el pdf, creo que estoy mal al colocar las librerías si me pudieras dar una ayuda mas, te lo agradecería mucho de antemano gracias por el tiempo que te has tomado en a ayudarme me ha servido mucho.

@wacomaniaco

7 noviembre 2014, 0:41