@ dile/ scanner

扫描浏览器中文档的 Web 组件:边缘检测、视角校正和多页 PDF 或 JPEG 输出,由 扫描 财务报告和审定财务报表 页:1。 。 。 .

一切运行在客户端上:不需要后端. 组件不上传任何内容;它会发送一个事件与产生的文件.

<dile-scanner multipage max-bytes="5242880"></dile-scanner>

import '@dile/scanner/scanner.js';

const scanner = document.querySelector('dile-scanner');
scanner.addEventListener('dile-document-scanned', (e) => upload(e.detail.file));
scanner.open();

文档和演示

读取文件并找到演示文稿 dile 组件场地

ML 检测器文件

ML探测器是可选和默认关闭的. 无 ml-detector 您的用户没有下载它。 与 ml-detector 该组件使用扫描仪的神经探测器,浏览器在背景中下载其文件(3.5 MB,约2.2 MB有gzip),这是扫描仪第一次打开.

默认文件来自jsDelivr. 软件包安装匹配 scanic-ml 版本(3.5 MB 在 node_modules,因此您可以使用包含 Vite 插件服务自己的副本。 放在一个文件夹里 scanic-ml 版本 (/dile-scanner-ml/0.2.0/在虚拟模块中导出 URL :

// vite.config.js
import { scannerMlAssets } from '@dile/scanner/vite-plugin.js';

export default { plugins: [scannerMlAssets()] };

import { mlAssetsUrl } from 'virtual:dile-scanner-ml';

scanner.mlDetector = true;
scanner.mlAssetsUrl = mlAssetsUrl;

在PWA中使用它

ML文件可以被服务人员缓存,因此只能下载一次,这是扫描仪第一次被打开. 不要预先切除它们(它们会在安装应用程序时被下载), 而要添加运行时缓存规则 。 与花生相接:

VitePWA({
  workbox: {
    globIgnores: ['**/dile-scanner-ml/**'],
    runtimeCaching: [{
      urlPattern: ({ url }) => url.pathname.includes('/dile-scanner-ml/'),
      handler: 'CacheFirst',
      options: {
        cacheName: 'dile-scanner-ml',
        cacheableResponse: { statuses: [200] },
        expiration: { maxEntries: 3 },
      },
    }],
  },
})

版本的文件夹可以确保更新永远不会混合不同版本的缓存文件. 见 文档 关于细节.

维修附注

scanic 被钉入精确的版本,因为 src/corner-editor-styles.js 复制其角编辑器的样式(scanic注入到 document.head,它不会到达阴影根。 更新扫描时,请对照 node_modules/scanic/dist/scanic.js (检索) .scanic-corner-editor)和更新 scanic-ml (也被绑定)到扫描所期望的版本(参见jsDelivr URL in node_modules/scanic/dist/scanic-mlDetector.js) (中文(简体) ).