yushulx/barcode-region-detection.htm

## barcode-region-detection.htm
<!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>
	<!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>