actual size always

Author: mfbx9da4

SeamCarver.js

@@ -293,6 +293,9 @@ class SeamCarver {
         this.canvas.width = this.imageData.width;
         this.canvas.height = this.imageData.height;
 
+        this.canvas.style.width = this.imageData.width + 'px';
+        this.canvas.style.height = this.imageData.height + 'px';
+
         if (field === 'energy' || field === 'vminsum' || (field !== this.imageData.dataField)) {
             this.imageData = this.context.createImageData(this.width, this.height);
             this.imageData.dataField = field;

demo/javascript/build/bundle.js

@@ -294,6 +294,9 @@ class SeamCarver {
         this.canvas.width = this.imageData.width;
         this.canvas.height = this.imageData.height;
 
+        this.canvas.style.width = this.imageData.width + 'px';
+        this.canvas.style.height = this.imageData.height + 'px';
+
         if (field === 'energy' || field === 'vminsum' || (field !== this.imageData.dataField)) {
             this.imageData = this.context.createImageData(this.width, this.height);
             this.imageData.dataField = field;
@@ -403,7 +406,7 @@ var demo = window.demo;
 demo.config = {
 	drawField: 'rgb',
 	seamColor: "#32cd32",
-	autoIterations: 0,
+	autoIterate: false,
 	iterationState: 0
 };
 demo.image = new Image();
@@ -434,7 +437,7 @@ demo.iterate = function () {
 	setTimeout(function () {
 		demo.removeSeam()
 		demo.iteration++;
-		if (demo.iteration < demo.config.autoIterations) {
+		if (demo.config.autoIterate) {
 			demo.iterate();
 		}
 	}, 0);
@@ -461,6 +464,7 @@ demo.togglePixelation = function () {
 }
 
 key('i', function () {
+	demo.config.autoIterate = !demo.config.autoIterate;
 	demo.iterate();
 });
 
@@ -510,7 +514,11 @@ demo.reset = function () {
 	// demo.image.src = 'images/200x100.png';
 	// demo.image.src = 'images/chameleon.png';
 	// demo.image.src = 'images/HJocean.png';
-	demo.image.src = 'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fchameleon.png';
+	// demo.image.src = 'images/butterfly.png';
+	// demo.image.src = 'images/1000x300.jpg';
+	demo.image.src = 'images/1000x500.jpg';
+	// demo.image.src = 'images/1600x1200.jpg';
+	// demo.image.src = 'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fchameleon.png';
 };
 
 demo.reset();

demo/javascript/src/demo.js

@@ -8,7 +8,7 @@ var demo = window.demo;
 demo.config = {
 	drawField: 'rgb',
 	seamColor: "#32cd32",
-	autoIterations: 0,
+	autoIterate: false,
 	iterationState: 0
 };
 demo.image = new Image();
@@ -39,7 +39,7 @@ demo.iterate = function () {
 	setTimeout(function () {
 		demo.removeSeam()
 		demo.iteration++;
-		if (demo.iteration < demo.config.autoIterations) {
+		if (demo.config.autoIterate) {
 			demo.iterate();
 		}
 	}, 0);
@@ -66,6 +66,7 @@ demo.togglePixelation = function () {
 }
 
 key('i', function () {
+	demo.config.autoIterate = !demo.config.autoIterate;
 	demo.iterate();
 });
 
@@ -115,7 +116,11 @@ demo.reset = function () {
 	// demo.image.src = 'images/200x100.png';
 	// demo.image.src = 'images/chameleon.png';
 	// demo.image.src = 'images/HJocean.png';
-	demo.image.src = 'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fchameleon.png';
+	// demo.image.src = 'images/butterfly.png';
+	// demo.image.src = 'images/1000x300.jpg';
+	demo.image.src = 'images/1000x500.jpg';
+	// demo.image.src = 'images/1600x1200.jpg';
+	// demo.image.src = 'https://cdn.hyperdev.com/us-east-1%3A095124f7-7022-4119-9d6a-68fd1e3dd7ef%2Fchameleon.png';
 };
 
 demo.reset();

images/1000x300.jpg

@@ -20,10 +20,10 @@
 
 		canvas.image {
 			background: #eaeaea;
-			max-width: 100%;
-			max-height: 100%;
 			image-rendering: pixelated;
-			height: 100%;
+			/*max-width: 100%;*/
+			/*max-height: 100%;*/
+			/*height: 100%;*/
 			border: 1px solid #eaeaea;
 		}
 		header {
@@ -45,7 +45,7 @@
 	<header>
 			<button onclick="demo.togglePixelation()">Toggle pixelation (P)</button>
 			<button onclick="demo.reDraw('energy')">Energy (E)</button>
-			<button onclick="demo.reDraw('minsum')">Cumulative sum (S)</button>
+			<button onclick="demo.reDraw('minsum')">Min sum (S)</button>
 			<button onclick="demo.reDraw('minx')">Minx (X)</button>
 			<button onclick="demo.reDraw()">Color (C)</button>
 			<button onclick="demo.iterate()">Iterate (I)</button>

images/1000x500.jpg

@@ -56,8 +56,8 @@ describe('SeamCarver', function() {
             assert.equal(sm.energyMatrix[0][3], 1000);
             assert.equal(sm.minsumMatrix[0][3], 1000);
             assert.equal(sm.minxMatrix[0][3], 0);
-            assert.equal(sm.energyMatrix[1][2], Math.sqrt(52024));
-            assert.equal(sm.minsumMatrix[1][2], 1000 + Math.sqrt(52024));
+            assert.equal(parseInt(sm.energyMatrix[1][2]), parseInt(Math.sqrt(52024)));
+            assert.equal(parseInt(sm.minsumMatrix[1][2]), parseInt(1000 + Math.sqrt(52024)));
             assert.equal(sm.minxMatrix[1][2], 0);
             done();
         });