add re-encoding of jpg-images because of progressive rendering

scripts/main.js

@@ -16,6 +16,7 @@ require(
 	[
 		'src/process',
 		'src/image',
+		'src/file',
 		'src/dragdrop',
 		'src/controls',
 		'src/export-png',
@@ -28,6 +29,7 @@ require(
 	function(
 		process,
 		image,
+		file,
 		dragdrop,
 		controls,
 		png,
@@ -45,6 +47,7 @@ require(
 			var shared = {
 				feature: supported_features,
 				signals: {
+					'load-file'       : new Signal(),
 					'image-loaded'    : new Signal(),
 					'set-new-src'     : new Signal(),
 					'control-set'     : new Signal(),
@@ -62,6 +65,7 @@ require(
 			import_button.init( shared );
 			random_button.init( shared );
 			image.init( shared );
+			file.init( shared );
 		}
 
 		function showError( required_features )

scripts/src/dragdrop.js

@@ -3,7 +3,6 @@ define(
 	function()
 	{
 		var signals;
-		var reader;
 		var feature;
 
 		function init( shared )
@@ -11,14 +10,11 @@ define(
 			feature = shared.feature;
 			signals = shared.signals;
 
-			if ( feature['drag-drop' ] && feature['file-api' ] )
+			if ( feature['drag-drop' ] )
 			{
 				document.addEventListener( 'drop', dropped, false );
 				document.addEventListener( 'dragover', preventDefault, false );
 				document.addEventListener( 'dragleave', preventDefault, false );
-
-				reader = new FileReader();
-				reader.addEventListener( 'load', fileLoaded, false );
 			}
 		}
 
@@ -30,12 +26,15 @@ define(
 		function dropped( event )
 		{
 			event.preventDefault();
-			reader.readAsDataURL( event.dataTransfer.files[0] );
-		}
 
-		function fileLoaded( event )
+			if (
-		{
+				event.dataTransfer &&
-			signals['set-new-src'].dispatch( event.target.result );
+				event.dataTransfer.files &&
+				event.dataTransfer.files[0]
+			)
+			{
+				signals['load-file'].dispatch( event.dataTransfer.files[0] );
+			}
 		}
 
 		return { init: init };

scripts/src/file.js

@@ -0,0 +1,82 @@
+/*global define*/
+define(
+	function()
+	{
+		var signals;
+		var reader;
+		var feature;
+		var allowed_file_types = [ 'image/png', 'image/jpg', 'image/jpeg' ];
+		var re_encode = false;
+		var tmp_canvas = document.createElement( 'canvas' );
+		var tmp_ctx = tmp_canvas.getContext( '2d' );
+		var tmp_img = new Image();
+
+		function init( shared )
+		{
+			signals = shared.signals;
+			feature = shared.feature;
+
+			if ( feature['file-api' ] )
+			{
+				signals['load-file'].add( loadFile );
+				reader = new FileReader();
+				reader.addEventListener( 'load', fileLoaded, false );
+			}
+		}
+
+		function loadFile( file )
+		{
+			if (
+				file &&
+				file.type &&
+				allowed_file_types.indexOf( file.type ) !== -1
+			)
+			{
+				re_encode = false;
+
+				// beware of ugly hack:
+				// jpg images can be progressive, in which case we need to
+				// convert them to to png to remove the progressive rendering.
+				// why? because i haven't figured out how to deal with
+				// progressive jpgs in the glitch logic yet
+				if ( allowed_file_types.indexOf( file.type ) > 0 )
+				{
+					re_encode = true;
+				}
+				
+				reader.readAsDataURL( event.dataTransfer.files[0] );
+			}
+		}
+
+		function fileLoaded( event )
+		{
+			var file_src = event.target.result;
+
+			if ( re_encode )
+			{
+				re_encode = false;
+
+				reEncode( file_src, signals['set-new-src'].dispatch );
+			}
+
+			else
+			{
+				signals['set-new-src'].dispatch( file_src );
+			}
+		}
+
+		function reEncode( file_src, callback )
+		{
+			tmp_img.onload = function() {
+				tmp_canvas.width = tmp_img.naturalWidth;
+				tmp_canvas.height = tmp_img.naturalHeight;
+				tmp_ctx.drawImage( tmp_img, 0, 0 );
+				callback( tmp_canvas.toDataURL( 'image/png' ) );
+			};
+
+			tmp_img.src = file_src;
+		}
+
+		return { init: init };
+	}
+);

scripts/src/glitch.js

@@ -91,7 +91,10 @@ define(
 
 			for ( var i = 0, l = data.length; i < l; i++ )
 			{
-				if ( data[i] === 0xFF && data[i + 1] === 0xDA )
+				if (
+					data[i] === 0xFF &&
+					data[i + 1] === 0xDA
+				)
 				{
 					result = i + 2;
 					break;

scripts/src/image.js

@@ -5,9 +5,6 @@ define(
 		var signals;
 		var image;
 		var initialized = false;
-		
-		// max 2k px per side, so 2000 * 2000
-		var max_image_area = 4000000;
 
 		function init( shared )
 		{
@@ -25,8 +22,6 @@ define(
 
 		function imageLoaded()
 		{
-			constrainImageSize( image );
-
 			signals['image-loaded'].dispatch( image );
 			initialized = true;
 		}
@@ -44,25 +39,6 @@ define(
 				setTimeout( imageLoaded, 10 );
 			}
 		}
-		
-		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/import-button.js

@@ -10,7 +10,6 @@ define(
 		var file_reader;
 		var image;
 		var file_loading = false;
-		var allowed_file_types = [ 'image/png', 'image/jpg', 'image/jpeg' ];
 
 		function init( shared )
 		{
@@ -25,7 +24,6 @@ define(
 				import_button = document.getElementById( 'import-button' );
 				import_input = document.getElementById( 'import-input' );
 
-				file_reader.addEventListener( 'load', fileLoaded, false );
 				import_button.addEventListener( 'click', buttonClicked, false );
 				import_input.addEventListener( 'change', fileSelected, false );
 			}
@@ -46,20 +44,15 @@ define(
 			var files = event.target.files;
 
 			if (
-				files[0] &&
+				event.target &&
-				files[0].type &&
+				event.target.files &&
-				allowed_file_types.indexOf( files[0].type ) !== -1
+				event.target.files[0]
 			)
 			{
-				file_reader.readAsDataURL( files[0] );
+				signals['load-file'].dispatch( event.target.files[0] );
 			}
 		}
 
-		function fileLoaded( event )
-		{
-			signals['set-new-src'].dispatch( event.target.result );
-		}
-
 		return { init: init };
 	}
 );