条形码区域解码：Web小工具

条形码解码首先要做定位，找到条形码在图像中的区域。但是有时候受图像质量影响，算法找寻的区域可能产生偏差，最后导致解码失败。这个时候，可以尝试手动选择区域，来辅助条形码的识别。

Web Canvas框选识别条形码

需求：

1. 在网页中加载条形码图像。
2. 使用鼠标框选出条形码的区域。
3. 识别区域中的条形码。

Web Canvas图像显示

创建input选择文件。获取文件对象之后，使用FileReader读取并绘制到canvas上。如果读取的图像太大，可以设定一个最大缩放值：

<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.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);