Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple region selection tool for speeding up barcode detection
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.6.0/dist/dbr.js" data-productKeys="LICENSE-KEY"></script>
<style>
#container {
position: relative;
}
#imageCanvas {
position: relative;
z-index: 1;
}
#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 2
}
</style>
</head>
<body>
<h1>Region Detection for Barcode Images</h1>
<div id="mousePosition"></div>
<div id="performance"></div>
<div id="region"></div>
<input type="file" id="barcode-file" onchange="loadfile()" accept=".jpg,.jpeg,.png,.bmp" />
<div id="container">
<canvas id="imageCanvas"> </canvas>
<canvas id="overlay"></canvas>
</div>
<script>
var performanceReport = document.getElementById('performance');
var mousePosition = document.getElementById('mousePosition');
var region = document.getElementById('region');
var canvas = document.getElementById('imageCanvas');
var context = canvas.getContext('2d');
var overlay = document.getElementById('overlay');
var overlayCtx = overlay.getContext('2d');
var isDrawing = false;
var maxLength = 1000;
var barcodereader;
(async () => {
barcodereader = await Dynamsoft.BarcodeReader.createInstance();
})();
function clearOverlay() {
overlayCtx.clearRect(0, 0, overlay.width, overlay.height);
overlayCtx.strokeStyle = '#ff0000';
overlayCtx.lineWidth = 5;
}
function loadfile() {
performanceReport.innerHTML = "";
region.innerHTML = "";
let name = document.getElementById('barcode-file');
if (name.files.length == 0) {
return;
}
// Decode the full image
(async () => {
await barcodereader.resetRuntimeSettings();
await barcodereader.updateRuntimeSettings('coverage'); // Mode: speed, balance, coverage
let settings = await barcodereader.getRuntimeSettings();
try {
let decodingStart = Date.now();
await barcodereader.decode(name.files[0]).then((results) => {
let decodingEnd = Date.now();
let txts = [];
try {
for (let i = 0; i < results.length; ++i) {
txts.push(results[i].BarcodeText);
}
let barcoderesults = txts.join(', ');
if (txts.length == 0) {
barcoderesults = 'No barcode found';
}
performanceReport.innerHTML = "Decode the full image. Barcode results: <a style='color:blue'>"+ barcoderesults + "</a>. Time cost: <a style='color:blue'>" + (decodingEnd - decodingStart) + "ms</a>.";
} catch (e) {
}
});
} catch (error) {
alert(error);
}
})();
let img = new Image();
var startX = 0, startY = 0;
var reader = new FileReader();
reader.onload = function (evt) {
img.onload = function () {
console.log(img.width, img.height);
if (img.width > maxLength) {
img.height = maxLength * img.height / img.width
img.width = maxLength;
}
else if (img.height > maxLength) {
img.width = maxLength * img.width / img.height
img.height = maxLength;
}
canvas.width = img.width;
canvas.height = img.height;
overlay.width = canvas.width;
overlay.height = canvas.height;
context.drawImage(img, 0, 0, img.width, img.height);
};
img.src = evt.target.result;
// Add mouse events
overlay.addEventListener('mousedown', e => {
startX = e.offsetX;
startY = e.offsetY;
isDrawing = true;
clearOverlay();
overlay.style.cursor = "crosshair";
});
overlay.addEventListener('mousemove', e => {
if (isDrawing) {
clearOverlay();
overlayCtx.beginPath();
overlayCtx.rect(startX, startY, e.offsetX - startX, e.offsetY - startY);
overlayCtx.stroke();
}
mousePosition.innerHTML = "Cursor: (" + e.offsetX + ", " + e.offsetY + ")";
});
overlay.addEventListener('mouseup', e => {
if (isDrawing) {
isDrawing = false;
mousePosition.innerHTML = "Cursor: (" + e.offsetX + ", " + e.offsetY + ")";
region.innerHTML = "Decode a region: (" + startX + ", " + startY + ", " + e.offsetX + ", " + e.offsetY + "). ";
overlay.style.cursor = "default";
// Decode a region of the barcode image
(async () => {
let settings = await barcodereader.getRuntimeSettings();
settings.region.regionLeft = startX * 100 / overlay.width;
settings.region.regionTop = startY * 100 / overlay.height;
settings.region.regionRight = e.offsetX * 100 / overlay.width;
settings.region.regionBottom = e.offsetY * 100 / overlay.height;
settings.region.regionMeasuredByPercentage = 1;
barcodereader.updateRuntimeSettings(settings);
try {
let decodingStart = Date.now();
await barcodereader.decode(name.files[0]).then((results) => {
let decodingEnd = Date.now();
let txts = [];
try {
for (let i = 0; i < results.length; ++i) {
txts.push(results[i].BarcodeText);
}
let barcoderesults = txts.join(', ');
if (txts.length == 0) {
barcoderesults = 'No barcode found';
}
region.innerHTML += "Barcode results: <a style='color:red'>"+ barcoderesults + "</a>. Time cost: <a style='color:red'>" + (decodingEnd - decodingStart) + "ms</a>.";
overlayCtx.font = '18px Verdana';
overlayCtx.fillStyle = '#ff0000';
overlayCtx.fillText(barcoderesults, startX, e.offsetY + 20);
}
catch (e) {
}
});
} catch (error) {
alert(error);
}
})();
}
});
};
reader.readAsDataURL(name.files[0]);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment