基于Laravel的仓库系统：扫码/拍照自动填充表单功能需求

核心方案选型 #

• 条形码扫描：优先用前端JS库直接处理，无需后端中转，响应速度快，适合结构化的tracking number场景
• 拍照OCR提取：针对非条形码的印刷标签，用前端OCR库或后端本地OCR服务识别文本，再通过正则匹配提取目标字段

Laravel端准备 #

1. 确保入库表单对应的模型（如InboundShipment）包含tracking_number和customer_name字段
2. 新增入库接口或复用现有表单提交路由，添加字段验证规则：

// app/Http/Controllers/InboundShipmentController.php
public function store(Request $request)
{
    $validated = $request->validate([
        'tracking_number' => 'required|unique:inbound_shipments',
        'customer_name' => 'required|string|max:255',
        // 其他入库必填字段
    ]);

    InboundShipment::create($validated);

    return redirect()->back()->with('success', '入库操作完成');
}

前端功能实现 #

1. 条形码扫描（QuaggaJS） #

直接调用设备后置摄像头扫描条形码，解析结构化内容填充表单：

<div id="scanner-box"></div>
<button id="start-scan-btn">启动条形码扫描</button>

<script src="https://cdn.jsdelivr.net/npm/quagga@0.12.1/dist/quagga.min.js"></script>
<script>
document.getElementById('start-scan-btn').addEventListener('click', () => {
    Quagga.init({
        inputStream: {
            name: "LiveStream",
            type: "LiveStream",
            target: document.getElementById('scanner-box'),
            constraints: { width: 640, height: 480, facingMode: "environment" }
        },
        decoder: { readers: ["code_128_reader", "ean_13_reader"] } // 匹配你的条形码类型
    }, err => {
        if (err) return console.error(err);
        Quagga.start();
    });

    Quagga.onDetected(result => {
        const codeContent = result.codeResult.code;
        // 假设条形码内容格式为「TN-12345678|张三」，用分隔符拆分字段
        const [trackingNum, customerName] = codeContent.split('|');
        
        // 填充表单输入框
        document.getElementById('tracking_number').value = trackingNum;
        document.getElementById('customer_name').value = customerName;
        
        Quagga.stop();
        alert('扫描完成，可核对信息后提交');
    });
});
</script>

2. 拍照OCR识别（Tesseract.js） #

针对印刷标签照片，识别文本后用正则匹配提取目标信息：

<div>
    <video id="camera-video" width="640" height="480" autoplay></video>
    <button id="capture-btn">拍照识别</button>
    <canvas id="capture-canvas" style="display:none;"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5.0.2/dist/tesseract.min.js"></script>
<script>
// 初始化后置摄像头
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
    .then(stream => document.getElementById('camera-video').srcObject = stream);

document.getElementById('capture-btn').addEventListener('click', async () => {
    const video = document.getElementById('camera-video');
    const canvas = document.getElementById('capture-canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    
    // 识别图片文本（支持中英文）
    const { data: { text } } = await Tesseract.recognize(
        canvas.toDataURL('image/png'),
        'eng+chi_sim'
    );

    // 正则匹配提取信息（可根据实际标签格式调整正则）
    const trackingMatch = text.match(/TN-\d{8}/); // 匹配TN开头的8位数字单号
    const nameMatch = text.match(/([\u4e00-\u9fa5]{2,4})|([A-Z][a-z]+ [A-Z][a-z]+)/); // 匹配中英文姓名

    // 填充表单
    document.getElementById('tracking_number').value = trackingMatch ? trackingMatch[0] : '';
    document.getElementById('customer_name').value = nameMatch ? nameMatch[0] : '';
});
</script>

优化建议 #

• 条形码格式尽量标准化，用固定分隔符区分字段，避免OCR识别误差
• OCR识别前提示用户对准标签、保证光线充足，可增加手动修正字段的入口
• 移动端需确保网站使用HTTPS协议，否则无法调用摄像头权限

内容的提问来源于stack exchange，提问作者Slygoth