Permalink
Browse files

fixed image adjustment

  • Loading branch information...
1 parent 92a59b3 commit 836cd92b52fd453ae4e6a9996bfb2682d932f845 @iamdenny committed Apr 15, 2012
Showing with 82 additions and 43 deletions.
  1. +8 −8 css/style.css
  2. +2 −2 index.html
  3. +72 −33 js/dny.Awesome5.js
View
16 css/style.css
@@ -1,6 +1,6 @@
@CHARSET "UTF-8";
-section{margin:0;padding:0;background:url(../images/body_bg.png) 0 0 repeat !important}
+body, section{margin:0;padding:0;background:url(../images/body_bg.png) 0 0 repeat !important}
header{background:url(../images/header_bg.png) 0 0 repeat-x transparent}
.ui-icon-custom-camera {background:url(../images/ui-icon-custom-camera.png) 0 0 no-repeat;}
@@ -11,13 +11,13 @@ header{background:url(../images/header_bg.png) 0 0 repeat-x transparent}
.ui-icon-custom-share {background:url(../images/ui-icon-custom-share.png) 0 0 no-repeat;border-radius:0;}
.ui-icon-custom-delete {background:url(../images/ui-icon-custom-delete.png) 0 0 no-repeat;border-radius:0;}
-#main-content {margin:auto;position:absolute;top:50%}
+#main-content {margin:auto;position:absolute;top:50%;margin-top:-10px;left:50%;margin-left:-75px;}
-#effect-content {margin:0;padding:0;list-style:none}
+#effect-content {margin:0;padding:5px 0 0 0 ;list-style:none}
#effect-content li {float:left;margin:0;padding:0}
-#effect-content strong {display:block;color:#fff;text-align:center}
+#effect-content strong {display:block;color:#fff;text-align:center;font-weight:normal;font-size:0.9em}
-#effectdetail-content {padding:100px 0;margin:auto;}
-#rotation-content {padding:100px 0;margin:auto;}
-#crop-content {padding:100px 0;margin:auto;}
-#edit-content {padding:100px 0;margin:auto;}
+#effectdetail-content {padding:0;margin:auto;}
+#rotation-content {padding:0;margin:auto;}
+#crop-content {padding:0;margin:auto;}
+#edit-content {padding:0;margin:auto;}
View
4 index.html
@@ -51,7 +51,7 @@
</header>
<div id="main-content" data-role="content" class="content">
- <p align='center'>Hello, NHN Technolgoy Services</p>
+ 사진을 선택해주세요.
</div>
<footer data-role="footer" data-position="fixed">
@@ -65,7 +65,7 @@
</footer>
</section>
- <section id="effect" data-role="page" data-fullscreen="true">
+ <section id="effect" data-role="page" data-add-back-btn="true">
<header data-role="header" data-position="fixed">
<h1 data-icon="custom-effect">효과</h1>
</header>
View
105 js/dny.Awesome5.js
@@ -41,19 +41,19 @@ dny.Awesome5 = jindo.$Class({
// set 'select gallery'
this._welSelectGallery = jindo.$Element("select-gallery");
this._wfSelectGalery = jindo.$Fn(this._onSelectGalleryClick, this).attach(this._welSelectGallery, "click");
-
- this._initWindowSize();
-
+
+ this._initWindowSize();
+
this._initEvents();
},
_initWindowSize : function(){
var self = this;
- var f = jindo.$Fn(function(e){
- //self._htClientSize = jindo.$Document(document).clientSize();
- }, this).bind();
- // bind함
- jindo.m.bindRotate(f);
+// var f = jindo.$Fn(function(e){
+// //self._htClientSize = jindo.$Document(document).clientSize();
+// }, this).bind();
+// // bind함
+// jindo.m.bindRotate(f);
},
_initEvents : function(){
@@ -75,7 +75,7 @@ dny.Awesome5 = jindo.$Class({
}
self._printEffectsToContent();
});
- $.mobile.fixedToolbars.setTouchToggleEnabled(false);
+ //$.mobile.fixedToolbars.setTouchToggleEnabled(false);
$("#effectdetail").bind("pagebeforeshow", function(event, ui){
self._welEffectDetailContent.empty();
@@ -163,7 +163,7 @@ dny.Awesome5 = jindo.$Class({
//$.mobile.changePage("div#main");
return false;
}
- self._printTheImageToContentAsImage(self._welCropContent);
+ self._printTheImageToContent(self._welCropContent);
self._addCropPluginToContent(self._welCropContent);
});
},
@@ -312,7 +312,6 @@ dny.Awesome5 = jindo.$Class({
_printEffectDetailToContent : function(){
var oEffects = new dny.Awesome5.Effects();
-
var oCanvas = document.createElement('canvas');
var htAdjustedSize = this._getAdjustedSize(this._oGalleryImage.width, this._oGalleryImage.height);
oCanvas.width = htAdjustedSize.width;
@@ -324,9 +323,16 @@ dny.Awesome5 = jindo.$Class({
this._sImageDataURL = oCanvas.toDataURL("image/jpeg");
this._welEffectDetailContent.append(oCanvas);
-
- var nMarginTop = (htAdjustedSize.height / 2 + 120) * -1;
- this._welEffectDetailContent.css({position:'absolute', top:'50%', marginTop: nMarginTop + 'px'});
+
+ if(htAdjustedSize.bWidthIsLonger){
+ var nMarginTop = (htAdjustedSize.height / 2) * -1;
+// alert(htAdjustedSize.width + " :: " + htAdjustedSize.height + " ::1 " + nMarginTop);
+ this._welEffectDetailContent.css({position:'absolute', top:'50%', left : 0, marginTop: nMarginTop + 'px', marginLeft : 0});
+ }else{
+ var nMarginLeft = (htAdjustedSize.width / 2) * -1;
+// alert(htAdjustedSize.width + " :: " + htAdjustedSize.height + " ::2 " + nMarginLeft);
+ this._welEffectDetailContent.css({position:'absolute', top:'0', left : '50%', marginTop : 0, marginLeft: nMarginLeft + 'px'});
+ }
this._oLastCanvas = oCanvas;
},
@@ -342,8 +348,15 @@ dny.Awesome5 = jindo.$Class({
oContext.drawImage(this._oGalleryImage, 0, 0, oCanvas.width, oCanvas.height);
welContent.append(oCanvas);
- var nMarginTop = (htAdjustedSize.height / 2 + 120) * -1;
- welContent.css({position:'absolute', top:'50%', marginTop: nMarginTop + 'px'});
+ if(htAdjustedSize.bWidthIsLonger){
+ var nMarginTop = (htAdjustedSize.height / 2) * -1;
+// alert(htAdjustedSize.width + " :: " + htAdjustedSize.height + " ::1 " + nMarginTop);
+ welContent.css({position:'absolute', top:'50%', left : 0, marginTop: nMarginTop + 'px', marginLeft : 0});
+ }else{
+ var nMarginLeft = (htAdjustedSize.width / 2) * -1;
+// alert(htAdjustedSize.width + " :: " + htAdjustedSize.height + " ::2 " + nMarginLeft);
+ welContent.css({position:'absolute', top:'0', left : '50%', marginTop : 0, marginLeft: nMarginLeft + 'px'});
+ }
this._oLastCanvas = oCanvas;
this._nRotationDegree = 0;
@@ -353,43 +366,69 @@ dny.Awesome5 = jindo.$Class({
var image = this._oGalleryImage;
var canvas = this._oLastCanvas;
var canvasContext = canvas.getContext("2d");
-
- var htAdjustedSize = this._getAdjustedSize(this._oGalleryImage.width, this._oGalleryImage.height);
- var width = htAdjustedSize.width;
- var height = htAdjustedSize.height;
+ var htAdjustedSize = null;
+ var width = null;
+ var height = null;
this._nRotationDegree = (this._nRotationDegree + nDegree) % 360;
switch(this._nRotationDegree) {
default :
case 0 :
+ htAdjustedSize = this._getAdjustedSize(this._oGalleryImage.width, this._oGalleryImage.height);
+ width = htAdjustedSize.width;
+ height = htAdjustedSize.height;
+
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
canvasContext.rotate(this._nRotationDegree * Math.PI / 180);
canvasContext.drawImage(image, 0, 0, width, height);
break;
case 90 :
case -270 :
- canvas.setAttribute('width', height);
- canvas.setAttribute('height', width);
+ htAdjustedSize = this._getAdjustedSize(this._oGalleryImage.height, this._oGalleryImage.width);
+ width = htAdjustedSize.width;
+ height = htAdjustedSize.height;
+
+ canvas.setAttribute('width', width);
+ canvas.setAttribute('height', height);
canvasContext.rotate(this._nRotationDegree * Math.PI / 180);
+ canvasContext.scale(width/this._oGalleryImage.height, width/this._oGalleryImage.height);
canvasContext.drawImage(image, 0, -image.height);
break;
case 180 :
case -180 :
+ htAdjustedSize = this._getAdjustedSize(this._oGalleryImage.width, this._oGalleryImage.height);
+ width = htAdjustedSize.width;
+ height = htAdjustedSize.height;
+
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
canvasContext.rotate(this._nRotationDegree * Math.PI / 180);
+ canvasContext.scale(width/this._oGalleryImage.width, width/this._oGalleryImage.width);
canvasContext.drawImage(image, -image.width, -image.height);
break;
case 270 :
case -90 :
- canvas.setAttribute('width', height);
- canvas.setAttribute('height', width);
+ htAdjustedSize = this._getAdjustedSize(this._oGalleryImage.height, this._oGalleryImage.width);
+ width = htAdjustedSize.width;
+ height = htAdjustedSize.height;
+
+ canvas.setAttribute('width', width);
+ canvas.setAttribute('height', height);
canvasContext.rotate(this._nRotationDegree * Math.PI / 180);
+ canvasContext.scale(width/this._oGalleryImage.height, width/this._oGalleryImage.height);
canvasContext.drawImage(image, -image.width, 0);
break;
};
+
+ if(htAdjustedSize.bWidthIsLonger){
+ var nMarginTop = (htAdjustedSize.height / 2) * -1;
+ this._welRotationContent.css({position:'absolute', top:'50%', left : 0, marginTop: nMarginTop + 'px', marginLeft : 0});
+ }else{
+ var nMarginLeft = (htAdjustedSize.width / 2) * -1;
+ this._welRotationContent.css({position:'absolute', top:'0', left : '50%', marginTop : 0, marginLeft: nMarginLeft + 'px'});
+ }
},
@@ -400,14 +439,14 @@ dny.Awesome5 = jindo.$Class({
},
_addCropPluginToContent : function(welContent){
- $('#crop-content img').Jcrop({
- onSelect: function(){console.log("selected");},
- bgColor: 'black',
- bgOpacity: .4,
- setSelect: [ 100, 100, 50, 50 ],
- aspectRatio: 16 / 9
- }, function(){
- this.animateTo([100,100,400,300]);
- });
+// $('#crop-content img').Jcrop({
+// onSelect: function(){console.log("selected");},
+// bgColor: 'black',
+// bgOpacity: .4,
+// setSelect: [ 100, 100, 50, 50 ],
+// aspectRatio: 16 / 9
+// }, function(){
+// this.animateTo([100,100,400,300]);
+// });
}
});

0 comments on commit 836cd92

Please sign in to comment.