Blog
Escaneo de documentos utilizando JavaScript y jQuery
Como sabemos, el código JavaScript del lado del cliente en la web no puede interactuar directamente con un escáner de documentos. No existe una API de JavaScript disponible hasta que Dynamsoft la haga realidad. El SDK Dynamic Web TWAIN, que es un SDK de escaneo de documentos basado en navegador, admite la programación en JavaScript para escáneres y cámaras digitales. Con el SDK, es fácil capturar imágenes y documentos desde navegadores web.
En este tutorial, explicaremos cómo crear una página HTML simple para escanear documentos y guardarlos como archivos PDF utilizando el SDK de Dynamic Web TWAIN. También discutiremos cómo escanear varias páginas en un lote y guardarlas como PDF, y cómo escanear documentos en papel en archivos PDF buscables con OCR en una aplicación web.
Funciones básicas del SDK de Dynamic Web TWAIN
- Compatible con Internet Explorer (32 bits o 64 bits), Edge, Chrome, Firefox, Safari en Windows, macOS y Linux
- Admite captura de imágenes y recorte de bordes desde cámaras móviles
- Compatible con escáneres TWAIN, cámaras digitales y otros dispositivos TWAIN
- Admite operaciones básicas de edición, como rotar, recortar, espejo, voltear, borrar, etc.
- Guarda las imágenes escaneadas en disco local, servidor web, base de datos, biblioteca de documentos de SharePoint y más.
Obtén más información sobre Dynamic Web TWAIN >
Implementar el escaneo de documentos con JavaScript
- Iniciar una aplicación web
- Agregar Dynamic Web TWAIN a la página HTML
- Utilizar Dynamic Web TWAIN para escanear o cargar imágenes
- Guardar imágenes como un archivo PDF
Paso 1: Iniciar una aplicación web
Descarga Dynamic Web TWAIN y registra una licencia de prueba gratuita por 30 días.
Después de la instalación, puedes encontrarlo por defecto en C: > Program Files > (x86) > Dynamsoft > Dynamic Web TWAIN SDK {número de versión} Trial.
1. Copia la carpeta de recursos de Dynamsoft a tu proyecto
La carpeta de recursos se puede copiar normalmente desde
C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {Número de Versión} {Trial}\
2. Crear una página HTML vacía
Por favor, coloca la página HTML vacía junto con la carpeta de recursos, como se muestra a continuación:
Paso 2. Agregar Dynamic Web TWAIN a la página HTML
2.1 - Incluir los dos archivos JS de Dynamsoft en la etiqueta <head>.
<script src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script src="Resources/dynamsoft.webtwain.config.js"></script>
2.2. Agregar el contenedor de Dynamic Web TWAIN a la etiqueta <body>.
<div id="dwtcontrolContainer" ></div>
Paso 3: Utilizar Dynamic Web TWAIN para escanear o cargar imágenes
Agrega botones de Escanear y Cargar a la página:
<input type="button" value="Escanear" onclick="AcquireImage();" />
<input type="button" value="Cargar" onclick="LoadImage();" >
Y agrega la implementación de las funciones AcquireImage() y LoadImage().
// Funciones de devolución de llamada para las API asíncronas
function OnSuccess() {
console.log('éxito');
}
function OnFailure(errorCode, errorString) {
alert(errorString);
}
function AcquireImage() {
if (DWObject) {
DWObject.SelectSource(function () {
DWObject.OpenSource();
OnAcquireImageSuccess = OnAcquireImageFailure = function () {
DWObject.CloseSource();
};
DWObject.AcquireImage(
{
IfShowUI: false,
PixelType: Dynamsoft.DWT.EnumDWT_PixelType.TWPT_RGB,
Resolution: 200,
IfDisableSourceAfterAcquire: true
},
OnAcquireImageSuccess,
OnAcquireImageFailure
);
}
}
}
function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Abre el diálogo de archivos del sistema para cargar la imagen
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Carga imágenes en todos los formatos admitidos (.bmp, .jpg, .tif, .png, .pdf). Se llamará a OnSuccess o OnFailure después de la operación
}
}
Ahora tenemos dos opciones para cargar documentos en Dynamic Web TWAIN:
- Escanear documentos desde un escáner (AcquireImage());
- O cargar documentos desde el disco duro (LoadImage()).
Paso 4: Guardar imágenes como un archivo PDF
Agreguemos un botón de guardar a la página web:
<input type="button" value="Guardar" onclick="SaveWithFileDialog();" />
Agrega la lógica de guardar los documentos en formato PDF:
function SaveWithFileDialog() {
if (DWObject) {
if (DWObject.HowManyImagesInBuffer > 0) {
DWObject.IfShowFileDialog = true;
DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
}
}
}
Ahora, guarda el archivo.
¡Eso es todo! Felicitaciones. Acabas de construir una página web en aproximadamente 5 minutos que puede escanear o cargar documentos y guardarlos como un archivo PDF.
Puedes abrir la aplicación de escaneo de documentos web en un navegador y probarla. Así es como se ve la página cuando se hace clic en el botón Escanear:
Ten en cuenta que solo se mostrarán escáneres compatibles con TWAIN en el cuadro de diálogo Seleccionar origen. Si no tienes un escáner real a mano, puedes instalar un escáner virtual para las pruebas, que es lo que hice. Si tienes un escáner pero no aparece en la lista, por favor chatea con nuestro soporte técnico para obtener una solución.
Después de escanear una página de ejemplo, se verá algo así:
Y sí, puedes guardarlo como un archivo PDF haciendo clic en el botón Guardar.
Un paso más allá
El ejemplo anterior es simple y funciona bien. Pero a veces, es posible que desees ir un paso más allá. Por ejemplo, ¿qué tal si se guardan los documentos automáticamente como PDF sin tener que hacer clic manualmente en el botón de guardar?
Con el mecanismo de eventos de Dynamic Web TWAIN, en realidad es bastante fácil hacerlo.
Dynamic Web TWAIN ofrece una serie de eventos a los que los usuarios pueden suscribirse. Los eventos se desencadenan cuando se alcanzan ciertos puntos de activación. Por ejemplo, tenemos un evento click para hacer clic con el mouse, un evento OnPostTransfer para el final de la transferencia de una imagen, etc.
Al final de la función Dynamsoft_OnReady(), simplemente agrega:
function SaveWithFileDialog() {
if (DWObject) {
if (DWObject.HowManyImagesInBuffer > 0) {
DWObject.IfShowFileDialog = true;
if (document.getElementById("imgTypejpeg").checked == true) {
// Si la imagen actual es blanco y negro
// 1 es blanco y negro, 8 es escala de grises, 24 es RGB
if (DWObject.GetImageBitDepth(DWObject.CurrentImageIndexInBuffer) == 1)
// Si es así, convierte la imagen a escala de grises
DWObject.ConvertToGrayScale(DWObject.CurrentImageIndexInBuffer);
// Guarda la imagen como JPEG
DWObject.SaveAsJPEG("DynamicWebTWAIN.jpg", DWObject.CurrentImageIndexInBuffer);
}
else if (document.getElementById("imgTypetiff").checked == true)
DWObject.SaveAllAsMultiPageTIFF("DynamicWebTWAIN.tiff", OnSuccess, OnFailure);
else if (document.getElementById("imgTypepdf").checked == true)
DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
}
}
}
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer'); // Obtén el objeto Dynamic Web TWAIN que está incrustado en el div con id 'dwtcontrolContainer'
if (DWObject) {
DWObject.RegisterEvent('OnPostAllTransfers', function(){setTimeout(SaveWithFileDialog,20);});
}
}
Escanear documentos y utilizar códigos de barras como separadores de lotes
¿Qué pasa si deseas escanear documentos en un lote y luego guardarlos como PDF? ¿O cómo separar automáticamente diferentes archivos en un lote?
Te recomendamos que primero pruebes esta demostración web.
Demostración en línea de escaneo de múltiples páginas a PDF
La aplicación de demostración permite a los usuarios escanear documentos desde escáneres TWAIN y MFP (impresoras multifunción). Pueden guardarlos como archivos PDF, ya sea un PDF de una sola página o un PDF de varias páginas. Además, utiliza códigos de barras como separadores de lotes. Si se detecta un código de barras en la página, se creará un nuevo archivo con el valor del código de barras como nombre de archivo.