<input type="file" id="barcode-file" onchange="loadfile()" accept=".jpg,.jpeg,.png,.bmp" />function loadfile() {let img = new Image();var reader = new FileReader();reader.onload = function (evt) {img.onload = function () {                    if (img.width > maxLength) {img.height = maxLength * img.height / img.widthimg.width = maxLength;}else if (img.height > maxLength) {img.width = maxLength * img.width / img.heightimg.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;};reader.readAsDataURL(name.files[0]);}

<style>#container {position: relative;}#imageCanvas {position: relative;z-index: 1;}#overlay {position: absolute;top: 0;left: 0;z-index: 2}</style><div id="container"><canvas id="imageCanvas"> </canvas><canvas id="overlay"></canvas>
</div>

function clearOverlay() {overlayCtx.clearRect(0, 0, overlay.width, overlay.height);overlayCtx.strokeStyle = '#ff0000';overlayCtx.lineWidth = 5;
}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";}});

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(', ');catch (e) {}});} catch (error) {alert(error);}})();}});