Front.id

Por motivos de seguridad o por capricho un cliente hace un tiempo nos pidió que al enviar un formulario en su web se haga una captura del mismo y se enviará como parte del formulario.

La verdad es que ahora que lo pienso la idea mola, porque un bot de spam lo último que haría es copiar esa funcionalidad...

Cuestión que nos pusimos manos a la obra, lo dejamos hecho y quería compartir con ustedes un ejemplo que dejé en github de la idea en funcionamiento.

Como ven en el ejemplo cuando le das a "Submit" se crea un screenshot del formulario en el estado actual. Lo que no ves es un campo hidden field que tiene la misma imagen codificada en base64 lista para ser almacenada en PHP, Node.js o lo que uses de fondo.

El ejemplo puedes verlo en un tab entrando en https://frontid.github.io/example-js-screeenshot-form/

El código fuente del ejemplo lo puedes encontrar aquí.

Parte técnica

El js principal (main.js) alberga dos funcionalidades. La del control del envío del formulario y la de la generación y adición de la imagen en el formulario una vez generada.

El control de envío es trivial pero necesario. Nos permite interceptar el envío y esperar hasta que la imagen se haya creado y asignado. Luego simplemente libera el formulario para que siga su camino al servidor donde será tu responsabilidad hacer con la imagen lo que quieras.

La otra parte del código es la que genera la imagen y devuelve una promesa que se resolverá cuando la imagen se haya creado.

El JS final sería algo como esto:

const FORM = document.querySelector('#the-form');
const HIDDEN_FIELD_SNAPSHOT = FORM.querySelector('input.screenshot');

FORM.addEventListener('submit', function (e) {
  const form = this;

  // Stop submit event.
  e.preventDefault();

  // Create the snapshot.
  const promise = html2canvas(form);

  // We have the snapshot ready.
  promise.then(function (canvas) {
      // Set the server snapshot id.
      HIDDEN_FIELD_SNAPSHOT.value = canvas.toDataURL();
      // Send the form to the server.
      form.submit();
    }
  );

});

Donde las únicas lineas que necesitas personalizar son las dos primeras para apuntar al formulario y al campo hidden que hará las veces de transporte de la imagen codificada.

Este código tiene una dependencia que habrás de incluir en tu código y es html2canvas.

Eso es todo. que aproveche!