Messing with the testbed, rounding crops

jwagner · jwagner · commit cff0be6d7307 · 2014-04-09T19:35:31.000+02:00
diff --git a/examples/style.css b/examples/style.css
@@ -12,3 +12,14 @@ input[type=range] {
     width: 300px;
 }
 img, canvas { padding: 8px; box-sizing: border-box; max-width: 100%; margin: auto; }
+
+.output {
+    width: 75%;
+    float: left;
+}
+.sidebar {
+    width: 25%;
+    float: left;
+    height: 600px;
+    overflow: auto;
+}
diff --git a/examples/testbed.html b/examples/testbed.html
@@ -15,8 +15,14 @@ <h1>smartcrop.js testbed</h1>
     </form>
     </div>
     <h2>Drop images on this page to analyze them.</h2>
-    <canvas id="c"></canvas>
-    <div id=debug></div>
+    <div class=output>
+        <canvas id="c"></canvas>
+        <div id=debug></div>
+    </div>
+    <div class=sidebar>
+        <div class=crops>
+        </div>
+    </div>
     <script src=jquery.js></script>
     <script src=underscore.js></script>
     <script src="../smartcrop.js"></script>
diff --git a/examples/testbed.js b/examples/testbed.js
@@ -2,7 +2,7 @@
 var canvas = $('canvas')[0],
     form = document.forms[0],
     ctx = canvas.getContext('2d'),
-    img;
+    img, crop;
 $('html')
     .on('dragover', function(e) {e.preventDefault(); return false;})
     .on('drop', function(e) {
@@ -13,33 +13,53 @@ $('html')
                 var reader = new FileReader();
                 // Note: addEventListener doesn't work in Google Chrome for this event
                 reader.onload = function (evt) {
-                    img = new Image();
-                    img.onload = function(){
-                        analyze();
-                    };
-                    img.src = evt.target.result;
-                };
+                    load(evt.target.result);
+                 };
                 reader.readAsDataURL(file);
             }
         }
         return false;
     });
+load('images/flickr/kitty.jpg');
 $('input[type=range]').change(_.debounce(function(){
     $(this).next('.value').text($(this).val());
     analyze();
 }));
+function load(src){
+    img = new Image();
+    img.onload = function(){
+        analyze();
+    };
+    img.src = src;
+
+}
 function analyze(){
     if(!img) return;
     SmartCrop.crop(img, {width: form.width.value, height: form.height.value, debug: true}, draw);
 }
 function draw(result){
+    selectedCrop = result.topCrop;
+    $('.crops').append(_.sortBy(result.crops, function(c){return -c.score.total;}).map(function(crop){
+        return $('<p>')
+            .text('Score: ' + ~~(crop.score.total*10000000) + ', ' + crop.x+'x'+crop.y)
+            .hover(function(){
+                drawCrop(crop);
+            }, function(){
+                drawCrop(selectedCrop);
+            })
+            .click(function(){ selectedCrop = crop; drawCrop(selectedCrop); })
+            .data('crop', crop);
+    }));
+    drawCrop(selectedCrop);
+    $('#debug').empty().append(result.debugCanvas);
+}
+function drawCrop(crop){
     canvas.width = img.width;
     canvas.height = img.height;
     ctx.drawImage(img, 0, 0);
     ctx.strokeStyle = 'red';
     ctx.lineWidth = 4;
-    ctx.strokeRect(result.topCrop.x, result.topCrop.y, result.topCrop.width, result.topCrop.height);
-    $('#debug').empty().append(result.debugCanvas);
+    ctx.strokeRect(crop.x, crop.y, crop.width, crop.height);
 }
 
 })();
diff --git a/smartcrop.js b/smartcrop.js
@@ -109,10 +109,10 @@ SmartCrop.crop = function(image, options, callback){
     var result = smartCrop.analyse(image);
     for(var i = 0, i_len = result.crops.length; i < i_len; i++) {
         var crop = result.crops[i];
-        crop.x /= prescale;
-        crop.y /= prescale;
-        crop.width /= prescale;
-        crop.height /= prescale;
+        crop.x = ~~(crop.x/prescale);
+        crop.y = ~~(crop.y/prescale);
+        crop.width = ~~(crop.width/prescale);
+        crop.height = ~~(crop.height/prescale);
     }
     callback(result);
     return result;
