如何识别图片上的数字

java 图片识别

解决方案 »

  1.   

    js 没这功能。
    这是OCR范畴
      

  2.   

    先做个测试<!DOCTYPE HTML>
    <html>
    <head>
     <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/jqplot/excanvas.min.js"></script><![endif]-->
    <script src=/scripts/jquery-1.8.3.min.js></script>
    </head>
    <body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    </canvas>
    <div id=view></div><script type="text/javascript">
    $(function() {var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=new Image()
    //img.src="http://img.bbs.csdn.net/upload/201406/28/1403921760_116598.jpg"
    img.src = '/photo.jpg'; //因涉及跨域，所以用了本地文件
    ctx.drawImage(img,0,0);x = 0;
    y = 9;
    h = 15;
    w = 12;
    p = ctx.getImageData( x, y, w, h)
    ctx.putImageData(p, x, y+20)$('#view').append(p.width + '<br>');
    $('#view').append(p.height + '<br>');for(y=0; y<p.height; y++) {
      for(x=0; x<p.width; x++) {
        i = (y*w+x)*4;
        n = (p.data[i] + p.data[i+1] + p.data[i+2]) / 3;
        $('#view').append((n>127 ? '&nbsp;' : 1)+'');
      }
      $('#view').append('<br>');}
    });
    </script></body>
    </html>
    再配上模式匹配代码，认出数字还是很容易的
    但因为由于有跨域问题，所以实际意义并不大
      

  3.   

    图片应该不存在跨域问题，除非对方有防盗链可以先用<img>加载图片，然后再放入canvas中
      

  4.   

    无限之 切割再匹配, 切割再匹配, 直到找到最优的组合或则设计一个好的切割算法, 切割后匹配(一般的ocr就能实现)
      

  5.   


    有跨域问题 
    这要产也有跨域问题？<canvas id="canvasId" width="400" height="300"></canvas>
    <img src="http://img.bbs.csdn.net/upload/201406/28/1403921760_116598.jpg" id="img" />
    <script type="text/javascript">
    var canvas = document.getElementById("canvasId");
    var cxt = canvas.getContext("2d");
    var img = document.getElementById("img");
    img.onload = function ()
    {
    cxt.drawImage(img,0,0);
    }
    </script>
      

  6.   


    有跨域问题 
    这要产也有跨域问题？<canvas id="canvasId" width="400" height="300"></canvas>
    <img src="http://img.bbs.csdn.net/upload/201406/28/1403921760_116598.jpg" id="img" />
    <script type="text/javascript">
    var canvas = document.getElementById("canvasId");
    var cxt = canvas.getContext("2d");
    var img = document.getElementById("img");
    img.onload = function ()
    {
    cxt.drawImage(img,0,0);
    }
    </script>var imageData = cxt.getImageData(0, 0, 10, 10);
            console.log(imageData);你在load里面试试看 跨域的图片可以显示 但是不能操作像素
      

  7.   


    有跨域问题 
    这要产也有跨域问题？<canvas id="canvasId" width="400" height="300"></canvas>
    <img src="http://img.bbs.csdn.net/upload/201406/28/1403921760_116598.jpg" id="img" />
    <script type="text/javascript">
    var canvas = document.getElementById("canvasId");
    var cxt = canvas.getContext("2d");
    var img = document.getElementById("img");
    img.onload = function ()
    {
    cxt.drawImage(img,0,0);
    }
    </script>var imageData = cxt.getImageData(0, 0, 10, 10);
            console.log(imageData);你在load里面试试看 跨域的图片可以显示 但是不能操作像素
    知道了，原来限制在这里