JS-OCR-demo加载本地文件

配景：

在相识 Tesseract 的识别效果的时间，有个demo项目很好用。有个小弊端，就是没事都要从摄像头抓取图片，然后举行识别。如果可以从本地读取图，就更方便了。
实现：

• 下载项目代码：https://github.com/kdzwinel/JS-OCR-demo
  
• 在页面index.html增加选择文件的input组件
  
  1. 51|<input type="file" id="uploadImage" accept="image/*" class="btn btn-lg btn-default" style="justify-self: center;
  2.     margin-top: 10px;">

  复制代码
• 在main.js修改方法：
  

• 增加加载本地图片的逻辑。
  
  1.    // 新增：本地图片上传
  2.    $('#uploadImage').on('change', function (e) {
  3.        var file = e.target.files[0];
  4.        if (!file) return;
  5.        var reader = new FileReader();
  6.        reader.onload = function (evt) {
  7.            var img = document.querySelector('#step2 img');
  8.            img.onload = function () {
  9.                // 将图片绘制到canvas
  10.                var canvas = document.querySelector('#step2 canvas');
  11.                canvas.width = pictureWidth;
  12.                canvas.height = pictureHeight;
  13.                
  14.                var ctx = canvas.getContext('2d');
  15.                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  16.                texture = fxCanvas.texture(canvas);
  17.                fxCanvas.draw(texture)
  18.                    .hueSaturation(-1, -1)//grayscale
  19.                    .unsharpMask(20, 2)
  20.                    .brightnessContrast(0.2, 0.9)
  21.                    .update();
  22.                $('.jcrop-holder img').attr('src', fxCanvas.toDataURL());
  23.                $(img).attr('src', fxCanvas.toDataURL());
  24.            };
  25.            img.src = evt.target.result;
  26.        };
  27.        reader.readAsDataURL(file);
  28.        step2(false);
  29.        changeStep(2);
  30.       
  31.    });

  复制代码
• 修改step2方法：增加参数判定，区分利用的相机截图，还是本地文件；截图时，利用图片真实像素为基准。
  
  1. function step2(usevideo=true) {
  2.     var canvas = document.querySelector('#step2 canvas');
  3.     var img = document.querySelector('#step2 img');
  4.    
  5.     //setup canvas
  6.     canvas.width = pictureWidth;
  7.     canvas.height = pictureHeight;
  9.     var ctx = canvas.getContext('2d');
  11.     if(usevideo){
  12.     //draw picture from video on canvas
  13.     ctx.drawImage(video, 0, 0);
  14.     console.log('draw picture from video on canvas');
  15.     }
  17.     //modify the picture using glfx.js filters
  18.     texture = fxCanvas.texture(canvas);
  19.     fxCanvas.draw(texture)
  20.         .hueSaturation(-1, -1)//grayscale
  21.         .unsharpMask(20, 2)
  22.         .brightnessContrast(0.2, 0.9)
  23.         .update();
  25.     window.texture = texture;
  26.     window.fxCanvas = fxCanvas;
  28.     $(img)
  29.         //setup the crop utility
  30.         .one('load', function () {
  31.             if (!$(img).data().Jcrop) {
  32.                 $(img).Jcrop({
  33.                     onSelect: function () {
  34.                         //Enable the 'done' button
  35.                         $('#adjust').removeAttr('disabled');
  36.                     },
  37.                     trueSize: [img.naturalWidth || img.width, img.naturalHeight || img.height]
  38.                 });
  39.             } else {
  40.                 //update crop tool (it creates copies of <img> that we have to update manually)
  41.                 $('.jcrop-holder img').attr('src', fxCanvas.toDataURL());
  42.             }
  43.         })
  44.         //show output from glfx.js
  45.         .attr('src', fxCanvas.toDataURL());
  46. }

  复制代码
• 修改step3方法：截图地区不再利用缩放系数计算；修改识别语言为中文chi_sim
  
  1. function step3() {
  2.         var canvas = document.querySelector('#step3 canvas');
  3.         var step2Image = document.querySelector('#step2 img');
  4.         var cropData = $(step2Image).data().Jcrop.tellSelect();
  5.         
  6.         // 直接使用裁剪区域的宽高
  7.         canvas.width = cropData.w;
  8.         canvas.height = cropData.h;
  10.         var ctx = canvas.getContext('2d');
  11.         ctx.drawImage(
  12.             step2Image,
  13.             cropData.x, cropData.y, cropData.w, cropData.h, // 源区域
  14.             0, 0, cropData.w, cropData.h                    // 目标区域
  15.         );
  17.         var spinner = $('.spinner');
  18.         spinner.show();
  19.         $('blockquote p').text('');
  20.         $('blockquote footer').text('');
  21.         
  22.         // do the OCR!
  23.         // 设置参数
  24.         var options = 'chi_sim+eng';
  25.         Tesseract.recognize(ctx, options).then(function (result) {
  26.             var resultText = result.text ? result.text.trim() : '';
  28.             //show the result
  29.             spinner.hide();
  30.             $('blockquote p').html('&bdquo;' + resultText + '&ldquo;');
  31.             $('blockquote footer').text('(' + resultText.length + ' characters)');
  32.         });
  33.     }

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告