Как сканировать изображения в интернете с помощью JS
JavaScript сильно развился и является одним из самых широко используемых языков в мире. В этой статье мы обсуждаем сканирование изображения в интернете с использованием продвинутого JavaScript и получаем подробности о QR-коде, штрих-коде, UPI. Давайте поиграем с кодом.
Мы проверяем поддержку Web API, поскольку в нескольких браузерах она может не работать.
// You can use window instead of globalThis
const isBrowserSupport = () => 'BarcodeDetector' in globalThis;На следующем этапе мы добавили JSX в функцию рендеринга. Нажав на текст галереи, вы можете загрузить изображение из своей галереи.
return (
<label
htmlFor={`fe-pilot-scanner-imgp-gallery`}
style={{
top,
bottom,
left,
right,
zIndex,
color,
position,
}}
>
Gallery
<input
id={`fe-pilot-scanner-imgp-gallery`}
type="file"
accept="image/*"
onChange={(event) => snapScanner({
successCb,
failureCb,
loadingCb,
successMsg,
failureMsg,
event,
...props,
})}
onSelect={(event) => snapScanner({
successCb,
failureCb,
loadingCb,
successMsg,
failureMsg,
event,
...props,
})}
style={{ display: 'none' }}
/>
</label>
);При выборе изображения из галереи давайте обработаем изображение, отсканируем QR-код/штрих-код/UPI.
const file = event.target.files[0];
const WindowBarcodeDetector = globalThis.BarcodeDetector;
const barcodeDetector = new WindowBarcodeDetector();
createImageBitmap(file)
.then((image) => barcodeDetector.detect(image))
.then((results) => {
const barcode = results[0];
if (barcode) {
console.log({ barCodeValue: barcode.rawValue, barCodeType: barcode.format });
} else {
console.log('INVALID_IMAGE');
}
})
.catch((error) => console.log('ERROR'));Вот и все. Довольно круто, правда. У нас есть функция обработки изображений для сканирования изображения и получения информации о QR-коде, штрих-коде, UPI. Ниже приведен весь код.
const isBrowserSupport = () => 'BarcodeDetector' in globalThis;
function SnapScanner({
via = 'gallery',
} = {}) {
const init = () => {
if (isBrowserSupport()) {
const file = event.target.files[0];
const WindowBarcodeDetector = globalThis.BarcodeDetector;
const barcodeDetector = new WindowBarcodeDetector();
createImageBitmap(file)
.then((image) => barcodeDetector.detect(image))
.then((results) => {
const barcode = results[0];
if (barcode) {
console.log({ barCodeValue: barcode.rawValue, barCodeType: barcode.format });
} else {
console.log('INVALID_IMAGE');
}
})
.catch((error) => console.log('ERROR'));
// Your Code will end here
} else {
console.log('UN_SUPPORTED_FEATURE');
}
};
};
const processBy = (via) => {
const attr = {};
if (via === 'gallery') {
attr.accept = 'image/*';
}
if (via === 'camera') {
attr.accept = '*';
attr.capture = 'filesystem';
}
if (via === 'phone') {
attr.accept = 'image/png,image/jpeg';
attr.capture = 'filesystem';
}
return attr;
};
return (
<label
htmlFor={`fe-pilot-scanner-imgp-${via}`}
style={{
top,
bottom,
left,
right,
zIndex,
color,
position,
}}
>
Gallery
<input
id={`fe-pilot-scanner-imgp-${via}`}
type="file"
{...processBy(via)}
onChange={(event) => init({
successCb,
failureCb,
loadingCb,
successMsg,
failureMsg,
event,
...props,
})}
onSelect={(event) => init({
successCb,
failureCb,
loadingCb,
successMsg,
failureMsg,
event,
...props,
})}
style={{ display: 'none' }}
/>
</label>
);
}
