From 5640d7a10b14bb348c42a9ee6b18f4da52070c05 Mon Sep 17 00:00:00 2001
From: Georg Fischer <snorpey@gmail.com>
Date: Sat, 28 Sep 2013 12:47:56 +0200
Subject: [PATCH 1/4] small speed improvements

- only get the imagedata once, when the image first loads
- only clear the canvas after image load
---
 scripts/src/process.js | 33 ++++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/scripts/src/process.js b/scripts/src/process.js
index 26e26d2..6f0d8a8 100644
--- a/scripts/src/process.js
+++ b/scripts/src/process.js
@@ -37,6 +37,8 @@ define(
 			if ( ! is_processing )
 			{
 				image = img;
+				resetCanvas( image );
+				updateImageData( image );
 				processImage( image );
 			}
 		}
@@ -64,29 +66,34 @@ define(
 			}
 		}
 
+		function updateImageData( img )
+		{
+			tmp_ctx.drawImage( img, 0, 0 );
+
+			image_data = tmp_ctx.getImageData( 0, 0, tmp_canvas.width, tmp_canvas.height );
+		}
+
+		function resetCanvas( img )
+		{
+			canvas_helper.clear( tmp_canvas, tmp_ctx );
+			canvas_helper.resize( tmp_canvas, img );
+			canvas_helper.clear( canvas, ctx );
+			canvas_helper.resize( canvas, img );
+		}
+
 		function processImage( img )
 		{
 			is_processing = true;
 
-			canvas_helper.clear( tmp_canvas, tmp_ctx );
-			canvas_helper.clear( canvas, ctx );
-			canvas_helper.resize( tmp_canvas, img );
-			canvas_helper.resize( canvas, img );
-
-			tmp_ctx.drawImage( img, 0, 0 );
-
-			image_data = tmp_ctx.getImageData( 0, 0, tmp_canvas.width, tmp_canvas.height );
-
 			glitch( image_data, values, draw );
 		}
 
-		function draw( image_data )
+		function draw( glitched_image_data )
 		{
-			canvas_helper.resize( canvas, image_data );
-			ctx.putImageData( image_data, 0, 0 );
+			ctx.putImageData( glitched_image_data, 0, 0 );
 
 			is_processing = false;
-			image_data = null;
+			glitched_image_data = null;
 		}
 
 		function exportData()

From 97c8e633acc141ebd7320e09399ebaa75e238aea Mon Sep 17 00:00:00 2001
From: Georg Fischer <snorpey@gmail.com>
Date: Sat, 28 Sep 2013 12:57:03 +0200
Subject: [PATCH 2/4] remove horizontal scrollbars

scale down canvas if the image is wider than the browser window
---
 index.html      |  4 +++-
 styles/main.css | 25 +++++++++++++++----------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 029854b..13e3cdb 100644
--- a/index.html
+++ b/index.html
@@ -40,7 +40,9 @@
 			<button id="save-button" class="button">export image</button>
 			<a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a>
 		</div>
-		<canvas id="canvas"></canvas>
+		<div class="canvas-wrapper">
+			<canvas id="canvas" />
+		</div>
 		<script src="scripts/lib/require-2.1.4.js" data-main="scripts/main"></script>
 	</body>
 </html>
diff --git a/styles/main.css b/styles/main.css
index d71da37..e2d4a2d 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -122,14 +122,6 @@ a:hover
 	display: none;
 }
 
-#canvas
-{
-	clear: both;
-	float: left;
-	margin-top: 30px;
-	display: block;
-}
-
 .export-wrapper
 {
 	clear: both;
@@ -156,8 +148,21 @@ a:hover
 		margin-left: 4px;
 	}
 
-
 .missing-feature
 {
 	clear: both;
-}
\ No newline at end of file
+}
+
+.canvas-wrapper
+{
+	width: 100%;
+	clear: both;
+	float: left;
+	margin-top: 30px;
+
+}
+	#canvas
+	{
+		display: block;
+		max-width: 100%;
+	}
\ No newline at end of file

From 5bc03c7ce778352a9ce1738148aac26b7469553b Mon Sep 17 00:00:00 2001
From: Georg Fischer <snorpey@gmail.com>
Date: Sat, 28 Sep 2013 13:29:35 +0200
Subject: [PATCH 3/4] add image size constraint

constrain image file size and scale down image if necessary
---
 scripts/src/image.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/scripts/src/image.js b/scripts/src/image.js
index 563cb3e..c526f8e 100644
--- a/scripts/src/image.js
+++ b/scripts/src/image.js
@@ -5,6 +5,9 @@ define(
 		var signals;
 		var image;
 		var initialized = false;
+		
+		// max 2k px per side, so 2000 * 2000
+		var max_image_area = 4000000;
 
 		function init( shared )
 		{
@@ -22,6 +25,8 @@ define(
 
 		function imageLoaded()
 		{
+			constrainImageSize( image );
+
 			signals['image-loaded'].dispatch( image );
 			initialized = true;
 		}
@@ -39,6 +44,25 @@ define(
 				setTimeout( imageLoaded, 10 );
 			}
 		}
+		
+		function constrainImageSize( img )
+		{
+			var ratio = 0;
+			var image_width = img.width;
+			var image_height = img.height;
+			var image_area = image_width * image_height;
+
+			if ( image_area > max_image_area )
+			{
+				ratio = max_image_area / image_area;
+				
+				image_width *= ratio;
+				image_height *= ratio;
+
+				img.naturalWidth = Math.floor( image_width );
+				img.naturalWidth = Math.floor( image_height );
+			}
+		}
 
 		return { init: init };
 	}

From 939cb3545f9a2a8dc251d5a98c7bbd76cdcbbf8e Mon Sep 17 00:00:00 2001
From: Georg Fischer <snorpey@gmail.com>
Date: Sat, 28 Sep 2013 13:30:17 +0200
Subject: [PATCH 4/4] update img attribute

---
 scripts/src/image.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/src/image.js b/scripts/src/image.js
index c526f8e..d4d7dfc 100644
--- a/scripts/src/image.js
+++ b/scripts/src/image.js
@@ -48,8 +48,8 @@ define(
 		function constrainImageSize( img )
 		{
 			var ratio = 0;
-			var image_width = img.width;
-			var image_height = img.height;
+			var image_width = img.naturalWidth;
+			var image_height = img.naturalWidth;
 			var image_area = image_width * image_height;
 
 			if ( image_area > max_image_area )