From f47c26c09e0cd0636a454661e5b97bdca074d7a1 Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Sat, 28 Sep 2013 14:19:37 +0200 Subject: [PATCH 1/2] add re-encoding of jpg-images because of progressive rendering --- scripts/main.js | 4 ++ scripts/src/dragdrop.js | 19 ++++----- scripts/src/file.js | 82 ++++++++++++++++++++++++++++++++++++ scripts/src/glitch.js | 5 ++- scripts/src/image.js | 24 ----------- scripts/src/import-button.js | 15 ++----- 6 files changed, 103 insertions(+), 46 deletions(-) create mode 100644 scripts/src/file.js diff --git a/scripts/main.js b/scripts/main.js index c637a5b..a5da5c1 100644 --- a/scripts/main.js +++ b/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 ) diff --git a/scripts/src/dragdrop.js b/scripts/src/dragdrop.js index 158a386..c24482d 100644 --- a/scripts/src/dragdrop.js +++ b/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 ) - { - signals['set-new-src'].dispatch( event.target.result ); + if ( + event.dataTransfer && + event.dataTransfer.files && + event.dataTransfer.files[0] + ) + { + signals['load-file'].dispatch( event.dataTransfer.files[0] ); + } } return { init: init }; diff --git a/scripts/src/file.js b/scripts/src/file.js new file mode 100644 index 0000000..f189a00 --- /dev/null +++ b/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 }; + } +); \ No newline at end of file diff --git a/scripts/src/glitch.js b/scripts/src/glitch.js index ade55c0..ac2fe4f 100644 --- a/scripts/src/glitch.js +++ b/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; diff --git a/scripts/src/image.js b/scripts/src/image.js index d4d7dfc..563cb3e 100644 --- a/scripts/src/image.js +++ b/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 }; } diff --git a/scripts/src/import-button.js b/scripts/src/import-button.js index 15f4baf..ccd6a52 100644 --- a/scripts/src/import-button.js +++ b/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] && - files[0].type && - allowed_file_types.indexOf( files[0].type ) !== -1 + event.target && + event.target.files && + 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 }; } ); \ No newline at end of file From 65be45c9796078ba31f7b0a162994c9d8051aa58 Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Sat, 28 Sep 2013 14:26:19 +0200 Subject: [PATCH 2/2] rip out re encoding code because it does not solve the problem. --- scripts/src/file.js | 44 ++------------------------------------------ 1 file changed, 2 insertions(+), 42 deletions(-) diff --git a/scripts/src/file.js b/scripts/src/file.js index f189a00..2a7577c 100644 --- a/scripts/src/file.js +++ b/scripts/src/file.js @@ -6,10 +6,6 @@ define( 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 ) { @@ -32,49 +28,13 @@ define( 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] ); + reader.readAsDataURL( file ); } } 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; + signals['set-new-src'].dispatch( event.target.result ); } return { init: init };