JSFiddle - React, Tailwind, and code Playground

by Roni Feldsher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-jquery-file-upload/2.1.9/cloudinary-jquery-file-upload.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1 align=center>
Cloudinary OCR demo
</h1>
<div class="container">  
  <div class="row">
    <div class="col-md-12 text-center">
      <div class="btn-group" role="group" aria-label="images">
        <button type="button" class="images btn btn-info active" value="one">Image 1</button>
        <button type="button" class="images btn btn-info" value="two">Image 2</button>
        <button type="button" class="images btn btn-info" value="three">Image 3</button>
        <button type="button" class="btn btn-info" value="plates" id=btnPlates>License Plates</button>
      </div>
    </div>
    <div id=divControls>
      <div class="col-md-12 text-center">
        <div class="btn-group" role="group" aria-label="type">
          <button type="button" class="type btn btn-warning active" value="none">None</button>
          <button type="button" class="type btn btn-warning" value="pixelate" class="active">Pixelate</button>
          <button type="button" class="type btn btn-warning" value="blur">Blur</button>
        </div>
      </div>
    
    <div class="col-md-12">
      <div class="input-group">
      <input type="text" id="value" class="form-control" placeholder="Value" aria-describedby="basic-addon1" value=100 size=8>
    </div>
    <div class="col-md-12 text-center">
      <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" id="all" value="all" checked> All
        </label>
        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="number" value="number"> Numbers only
  ...

CSS

pre{
  background: #cccccc;
  font-family: Consolas, "Bitstream Vera Sans Mono", Courier, monospace;
}
.container{
  margin-top: 20px;
}

.input-group{
  margin: 0 auto;
}
.btn-group{
  margin-bottom: 10px;
}
table {margin-top:10px;}
td {padding: 5px;}

JavaScript

$.cloudinary.config({ cloud_name: "cloudinary-roni"});

img_one = "https://www.cstatic-images.com/supersized/b/5/1/2f/0a2b262b2ef17ea3e85eefb381b.jpg";
img_two = "http://i.carsdn.co/image/upload/v1485817814/original-images/original/9/d/4/ed/c26ae691e3cc5b60fced4e4b100.jpg";
img_three = "http://i.carsdn.co/image/upload/v1485817819/original-images/original/2/a/0/b5/4a7a90019c1b95fbe0098b90bfa.jpg";
/*


var boxes = [];
for (i = 1; i < json_one.textAnnotations.length; i++) { 
  box = json_one.textAnnotations[i];
  if (box.description.match(/^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/) != null){
  	boxes.push([box.boundingPoly.vertices[0].x, box.boundingPoly.vertices[0].y, box.boundingPoly.vertices[1].x - box.boundingPoly.vertices[0].x, box.boundingPoly.vertices[2].y - box.boundingPoly.vertices[0].y]);
  }
}

blur_boxes = [];
for (box of boxes) {
  blur_boxes.push({x: box[0], y: box[1], width: box[2], height: box[3], effect: "blur_region:1000", crop: "scale"})
}
*/


var image_index = $('button.active').val();
function update_image(image_index){
	var boxes = [];
  $.getJSON($.cloudinary.url(image_index + "-y.json", {resource_type: "raw"}), function(json) {
    $('#json').html(JSON.stringify(json, null, '  '));
    for (i = 1; i < json.textAnnotations.length; i++) { 
      box = json.textAnnotations[i];
      regex1 = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
      regex2 = /\d/;
      //console.log(box.description);
      if ($('#number').is(':checked'))
      {
      	if(box.description.match(regex2) != null)
        {
          boxes.push([(box.boundingPoly.vertices[0].x || 0), (box.boundingPoly.vertices[0].y || 0), box.boundingPoly.vertices[1].x - (box.boundingPoly.vertices[0].x || 0), box.boundingPoly.vertices[2].y - (box.boundingPoly.vertices[0].y || 0)]);
        }
      }
      else
      {
	      boxes.push([(box.boundingPoly.vertices[0].x || 0), (box.boundingPoly.vertices[0].y || 0), box.boundingPoly.vertices[1].x -...