我已经尝试了一切,其他库(免费的,老板不会支付商业库想要的疯狂金钱),但它只是不会扫描 ean 13 代码。 整天都会扫描二维码。 尝试设置 ean_13_read 和 ean_reader 的选项均无济于事。 Quagga 和其他产品也以同样的方式失败,但这并不令人震惊,因为它们似乎主要基于 zxing。 谁能给我一些有效的示例代码? 我正在 dotnet 4.8 mvc 中工作,尽管这实际上只是纯 html/js 。 提前谢谢(希望如此)。
吉姆
这是我的代码,显然还做了其他一些事情。 我真的只是在寻找一个有效的样本!
@model Pocos.MCD_Stores
@{
ViewBag.Title = "DoVisit";
}
<label id="recordCountLabel">Records Loaded: 0</label>
<br />
<h2>Do Visit</h2>
<!-- Add buttons to start scanning and manually trigger a scan -->
<button id="startScanButton">Start Scanner</button>
<button id="scanNowButton" style="display: none;">Scan it now!</button>
<button id="resetButton">Reset</button>
<br />
<!-- Add a video element for the barcode scanner -->
<video id="barcode-scanner" width="600" height="400" style="border: 1px solid gray; display: block;"></video>
<br />
<label id="scannedBarcodeLabel">Scanned Barcode: None</label>
<br />
<label id="productDetailsLabel">Product Details: None</label>
<br />
<!-- Add the dropdown for products -->
<select id="productDropdown" style="width: 100%;">
<option value="">Select a product</option>
</select>
<link href="https://cdn.jsdelivr.net/npm/select2@('@')4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@('@')zxing/library@('@')0.18.6/umd/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@('@')4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
let selectedDeviceId;
const codeReader = new ZXing.BrowserMultiFormatReader();
console.log('ZXing code reader initialized');
document.getElementById('startScanButton').addEventListener('click', () => {
codeReader.listVideoInputDevices()
.then(videoInputDevices => {
selectedDeviceId = videoInputDevices.deviceId;
codeReader.decodeFromVideoDevice(selectedDeviceId, 'barcode-scanner', { formats: [ZXing.BarcodeFormat.EAN_13] }, (result, err) => {
if (result) {
console.log('Barcode detected:', result);
document.getElementById('scannedBarcodeLabel').innerText = `Scanned Barcode: ${result.text}`;
handleScannedBarcode(result.text);
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error('Error:', err);
}
});
document.getElementById('scanNowButton').style.display = 'block';
})
.catch(err => console.error('Error listing video input devices:', err));
});
document.getElementById('scanNowButton').addEventListener('click', () => {
codeReader.decodeOnceFromVideoDevice(selectedDeviceId, 'barcode-scanner', { formats: [ZXing.BarcodeFormat.EAN_13] })
.then(result => {
if (result) {
console.log('Barcode detected:', result);
document.getElementById('scannedBarcodeLabel').innerText = `Scanned Barcode: ${result.text}`;
handleScannedBarcode(result.text);
}
})
.catch(err => {
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error('Error:', err);
}
});
});
document.getElementById('resetButton').addEventListener('click', () => {
codeReader.reset();
document.getElementById('scannedBarcodeLabel').innerText = 'Scanned Barcode: None';
document.getElementById('productDetailsLabel').innerText = 'Product Details: None';
document.getElementById('scanNowButton').style.display = 'none';
});
// Function to handle the scanned barcode
function handleScannedBarcode(barcode) {
const productDbRequest = indexedDB.open('ProductDatabase', 1);
productDbRequest.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction('products', 'readonly');
const objectStore = transaction.objectStore('products');
const getRequest = objectStore.get(barcode);
getRequest.onsuccess = (event) => {
const product = event.target.result;
if (product) {
document.getElementById('productDetailsLabel').innerText = `Product Details: ${JSON.stringify(product)}`;
storeScannedProduct(product.Sku);
} else {
document.getElementById('productDetailsLabel').innerText = `Product Details: Not found`;
}
};
getRequest.onerror = (event) => {
console.error('Error retrieving product:', event.target.error);
};
};
productDbRequest.onerror = (event) => {
console.error('Error opening ProductDatabase:', event.target.error);
};
}
function customMatcher(params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === '') {
return data;
}
// Make the search case-insensitive
const term = params.term.toLowerCase();
const text = data.text.toLowerCase();
// Check if the term is found within the text
if (text.indexOf(term) > -1) {
return data;
}
// Return `null` if the term should not be displayed
return null;
}
// Function to store the scanned product in the second IndexedDB
function storeScannedProduct(sku) {
const scannedDbRequest = indexedDB.open('scannedProductDatabase', 1);
scannedDbRequest.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction('skuCounts', 'readwrite');
const objectStore = transaction.objectStore('skuCounts');
const getRequest = objectStore.get(sku);
getRequest.onsuccess = (event) => {
const record = event.target.result;
if (record) {
record.Count += 1;
objectStore.put(record);
} else {
objectStore.put({ Sku: sku, Count: 1 });
}
};
getRequest.onerror = (event) => {
console.error('Error retrieving scanned product:', event.target.error);
};
};
scannedDbRequest.onerror = (event) => {
console.error('Error opening scannedProductDatabase:', event.target.error);
};
}
// Ensure the DOM is fully loaded before running the script
document.addEventListener('DOMContentLoaded', (event) => {
// Initialize the second IndexedDB
initScannedProductDB()
.then(db => {
console.log('Second IndexedDB is ready to use.');
// Retrieve the record count from localStorage and update the label
const recordCount = localStorage.getItem('recordCount');
if (recordCount) {
document.getElementById('recordCountLabel').innerText = `Records Loaded: ${recordCount}`;
}
})
.catch(error => {
console.error('Error initializing second IndexedDB:', error);
});
// Fetch products from IndexedDB and populate the dropdown
fetchProductsFromIndexedDB().then(products => {
products.sort((a, b) => {
const descA = a.Desc !== "NULL" ? a.Desc.toLowerCase() : "";
const descB = b.Desc !== "NULL" ? b.Desc.toLowerCase() : "";
if (descA < descB) return -1;
if (descA > descB) return 1;
return 0;
});
const dropdown = $('#productDropdown');
products.forEach(product => {
const desc = product.Desc !== "NULL" ? product.Desc : "";
const colour = product.Colour !== "NULL" ? product.Colour : "";
const size = product.Size !== "NULL" ? product.Size : "";
const option = new Option(`${desc} - ${colour} - ${size}`, product.Sku, false, false);
dropdown.append(option);
});
dropdown.select2({
placeholder: "Select a product",
allowClear: true,
matcher: customMatcher
});
}).catch(error => {
console.error('Error fetching products:', error);
});
});
// Function to initialize the second IndexedDB
function initScannedProductDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open('scannedProductDatabase', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
const objectStore = db.createObjectStore('skuCounts', { keyPath: 'Sku' });
objectStore.createIndex('Sku', 'Sku', { unique: true });
objectStore.createIndex('Count', 'Count', { unique: false });
};
request.onsuccess = (event) => {
console.log('Second IndexedDB initialized successfully.');
resolve(event.target.result);
};
request.onerror = (event) => {
reject(event.target.error);
};
});
}
// Function to fetch products from IndexedDB
function fetchProductsFromIndexedDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open('ProductDatabase', 1);
request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction(['products'], 'readonly');
const objectStore = transaction.objectStore('products');
const products = [];
objectStore.openCursor().onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
products.push(cursor.value);
cursor.continue();
} else {
resolve(products);
}
};
objectStore.openCursor().onerror = (event) => {
reject(event.target.error);
};
};
request.onerror = (event) => {
reject(event.target.error);
};
});
}
</script>
您是否尝试过提示您要扫描的格式?
const hints = new Map();
hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, [
ZXing.BarcodeFormat.EAN_13
]);
const codeReader = new ZXing.BrowserMultiFormatReader(hints);