Merge branch 'changes' into develop

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>

scripts/src/image.js

@@ -6,6 +6,9 @@ define(
 		var image;
 		var initialized = false;
 		
+		// max 2k px per side, so 2000 * 2000
+		var max_image_area = 4000000;
+
 		function init( shared )
 		{
 			signals = shared.signals;
@@ -22,6 +25,8 @@ define(
 
 		function imageLoaded()
 		{
+			constrainImageSize( image );
+
 			signals['image-loaded'].dispatch( image );
 			initialized = true;
 		}
@@ -40,6 +45,25 @@ define(
 			}
 		}
 		
+		function constrainImageSize( img )
+		{
+			var ratio = 0;
+			var image_width = img.naturalWidth;
+			var image_height = img.naturalWidth;
+			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 };
 	}
 );

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( glitched_image_data, 0, 0 );
-			ctx.putImageData( image_data, 0, 0 );
 
 			is_processing = false;
-			image_data = null;
+			glitched_image_data = null;
 		}
 
 		function exportData()

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;
 }
+
+.canvas-wrapper
+{
+	width: 100%;
+	clear: both;
+	float: left;
+	margin-top: 30px;
+
+}
+	#canvas
+	{
+		display: block;
+		max-width: 100%;
+	}