janishutz/color-thief
1
0
Fork 0
mirror of https://github.com/janishutz/color-thief.git synced 2025-11-25 22:04:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed inital image upload bug and image centering issues

Browse Source
This commit is contained in:
Nathan Spady
2013-05-11 18:50:33 -07:00
parent 1dd3764fd2
commit b23a475248
1 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
index.js
View File

@@ -92,10 +92,14 @@ $(document).ready(function () {
$('#draggedImages').prepend( html ); $('#draggedImages').prepend( html );
var img = $('.droppedImage .targetImage').get(0); var img = $('.droppedImage .targetImage').get(0);
displayColors( img );
util.centerImg( img, 400, 300);
$('.droppedImage').slideDown(); // Must wait for image to load in DOM, not just load from FileReader
$(img).on('load', function() {
displayColors( img );
util.centerImg( img, 400, 300);
$('.droppedImage').slideDown();
});
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} else { } else {
@@ -121,16 +125,25 @@ $(document).ready(function () {
var util = { var util = {
centerImg: function( img, containerWidth, containerHeight) { centerImg: function( img, containerWidth, containerHeight) {
var $img = $(img); var $img = $(img);
var imgHeight = $img.get(0).height;
var imgWidth = $img.get(0).width; var imgWidth = $img.get(0).width;
var imgHeight = $img.get(0).height;
var imgAspectRatio = imgHeight/imgWidth;
if ( imgHeight < containerHeight ) { if ( imgHeight > containerHeight ) {
var vOffset = ( containerHeight - imgHeight )/2; imgWidth = containerHeight / imgAspectRatio;
$img.css('margin-top', ( hOffset + "px" )); $img.css('width', ( imgWidth + "px" ));
}
if ( imgWidth > containerWidth ) {
$img.css('width', ( containerWidth + "px" ));
imgHeight = imgAspectRatio * containerWidth;
} }
if ( imgWidth < containerWidth ) { if ( imgWidth < containerWidth ) {
var hOffset = ( containerWidth - imgWidth )/2; var hOffset = ( containerWidth - imgWidth )/2;
$img.css('margin-left', ( hOffset + "px" )); $img.css('margin-left', ( hOffset + "px" ));
} }
if ( imgHeight < containerHeight ) {
var vOffset = ( containerHeight - imgHeight )/2;
$img.css('margin-top', ( vOffset + "px" ));
}
} }
}; };