Friday, July 27, 2018

Credit Card Recognition

Credit Card recognition will be based on the modal from OpenCV,  It's not necessary to train our own modal based on data as the card number format are mostly all the same.

1.  download the OpenCV jar file and add into classpath or import as maven, then static import the OpenCV c++ library as below:


static {
        System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
    }


2. read the credit card image into the program into the Mat object


public static void main(String[] args) {
        Mat srcImage = loadImage("img/card.jpg");
}

public static  Mat loadImage(String path) {
 Mat newImage = Imgcodecs.imread(path);
 return newImage;
}



3. turn the card image into grey color (grey scale process)


public static void main(String[] args) {
 Mat srcImage = loadImage("img/card.jpg");
 Mat grey = grey(srcImage);
}

public static Mat grey(Mat srcMat) {
 Mat dest = new Mat (); 
 Imgproc.cvtColor(srcMat, dest, Imgproc.COLOR_RGB2GRAY);
 return dest;
}


4. turn the grey scale image into a black & white image. (binary process)


public static void main(String[] args) 
{
 Mat srcImage = loadImage("img/card.jpg");
 Mat grey = grey(srcImage);
 Mat binary = blackWhite(grey);
}

public static Mat blackWhite(Mat grayMat) {
  Mat binaryMat = new Mat(grayMat.height(),grayMat.width(),CvType.CV_8UC1);
         Imgproc.threshold(grayMat, binaryMat, 30, 200, Imgproc.THRESH_BINARY);
         return binaryMat;
}


5. Erode the black & white image to make the word bolder and clearer so as to be easy to be recognized.


public static void main(String[] args) {
 Mat srcImage = loadImage("img/card.jpg"); 
 Mat grey = grey(srcImage);
        Mat binary = blackWhite(grey);
 Mat erode = imageErode(binary);
}
public static Mat imageErode(Mat srcMat) {
 Mat destMat = new Mat();
 Mat element = Imgproc.getStructuringElement(Imgproc.MORPH_RECT, new Size(3, 3));
        Imgproc.erode(srcMat,destMat,element);
        return destMat;
}


6. crop the key region to remove the noise.


public static void main(String[] args) {
 Mat srcImage = loadImage("img/card.jpg");
 Mat grey = grey(srcImage);
        Mat binary = blackWhite(grey);
 Mat erode = imageErode(binary);
        Mat adjust = filterAndcut(erode);
}
public static Mat  filterAndcut(Mat destMat) {
  int a =0, b=0, state = 0;
         for (int y = 0; y < destMat.height(); y++) //row
         {
             int count = 0;
             for (int x = 0; x < destMat.width(); x++) //column
             {
                 // get the row pixel value 
                 byte[] data = new byte[1];
                 destMat.get(y, x, data);
                 if (data[0] == 0)
                     count = count + 1;
             }
             if (state == 0)//not a valid row
             {
                 if (count >= 150)//find a valid row
                 {//valid row qualify a 10 pixel noise
                     a = y;
                     state = 1;
                 }
             }
             else if (state == 1)
             {
                 if (count <= 150)// find a valid row
                 {//valid row qualify a 10 pixel noise
                     b = y;
                     state = 2;
                 }
             }
         }
         System.out.println("filter upper bound "+Integer.toString(a));
         System.out.println("filter lower bound "+Integer.toString(b));


         //crop the valid region
         Rect rect = new Rect(0,a,destMat.width(),b - a);
         Mat resMat = new Mat(destMat,rect);
         return resMat;
 }


7. recognize and print the result.


public static void main(String[] args) {
  Mat srcImage = loadImage("img/card.jpg");
  Mat grey = grey(srcImage); 
  Mat binary = blackWhite(grey);
  Mat erode = imageErode(binary);
  Mat adjust = filterAndcut(erode);
  
  printResult(matToBufferImage(adjust)); 
}

public static BufferedImage matToBufferImage(Mat grayMat) {
 if (grayMat == null) {
      return null;
 }
 byte[] data1 = new byte[grayMat.rows() * grayMat.cols() * (int)(grayMat.elemSize())];
 grayMat.get(0, 0, data1);
 BufferedImage image1 = new BufferedImage(grayMat.cols(), grayMat.rows(),BufferedImage.TYPE_BYTE_GRAY);                           
 image1.getRaster().setDataElements(0, 0, grayMat.cols(), grayMat.rows(), data1);
 return image1;
}
public static void printResult(BufferedImage src) {
 ITesseract instance = new Tesseract();
 instance.setDatapath("F:/Tess4J-3.4.8-src/Tess4J/tessdata"); // Credit card trained data
 long startTime = System.currentTimeMillis();
 String ocrResult;
 try {
       ocrResult = instance.doOCR(src);
       System.out.println("OCR Result: \n" + ocrResult + "\n spend:" + (System.currentTimeMillis() - startTime) + "ms");
 } catch (TesseractException e) {
       e.printStackTrace();
 } 
}




That's all for this project.







JavaScript !function()

If you like to read some JavaScript plugin source code online you may frequently encounter something like this below :


so how do we interpret this?

If we print this out it is like this below, why? because an anonymous function is undefined, and !undefined is true, we don't care whether it returns true or false but care that the JavaScript engine can parse it perfectly. 

!function(){alert('sd')}()        // true

But you may wonder how does an anonymous function can call itself with no error.

We normally see the below formats more frequently :

(function(){alert('123')})()        // true
(function(){alert('123')}())        // true

Anyway whichever format it is, its main purpose to put a bracket around is to turn a function declaration into an Expression which can be parsed/ Run. for example


function a(){alert('zsd')}   // undefined

This is a function declaration if we put a bracket behind directly, JavaScript Engine certainly doesn't understand. so Syntax error will come.


function a(){alert('iifksp')}()  // SyntaxError: unexpected_token

This code makes the engine confused between function declaration and function call. However, putting a bracket around is different, it turns a function declaration into an expression, the engine will understand it is no more a function declaration but an expression, So this expression will be called when the code is run into this line.

In short, Any grammar that can help to make the engine clearly differentiate function declaration and expression will be accepted by Javascript. For example:


var i = function(){return 10}();        // undefined
1 && function(){return true}();        // true
1, function(){alert('as')}();        // undefined

Assignment Operators,  Logic Operators, and even a comma can tell then engine that this is not a function declaration but a function expression. The unary operator is said to be the fastest way to clear the ambiguity for the engine, exclamation mark (!) is just one of them. here come some examples:


!function(){alert('as')}()        // true
+function(){alert('as')}()        // NaN
-function(){alert('as')}()        // NaN
~function(){alert('as')}()        // -1
void function(){alert('as')}()        // undefined
new function(){alert('as')}()        // Object
delete function(){alert('as')}()        // true
(function(){alert('as')})()        // undefined
(function(){alert('as')}())        // undefined

More Examples  


Option Code
! !function(){;}()
+ +function(){;}()
- -function(){;}()
~ ~function(){;}()
-1 (function(){;})()
-2 (function(){;}())
void void function(){;}()
new new function(){;}()
delete delete function(){;}()
= var i = function(){;}()
&& 1 && function(){;}()
|| 0 || function(){;}()
& 1 & function(){;}()
| 1 | function(){;}()
^ 1 ^ function(){;}()
, 1, function(){;}()

Add Loading Spinner for web request.

when web page is busily loading. normally we need to add a spinner for the user to kill their waiting impatience. Here, 2 steps we need to d...