Created
July 3, 2012 23:51
-
-
Save atsusy/3044207 to your computer and use it in GitHub Desktop.
PhotoGalleryで選んだイメージをフルサイズで編集できるCommonJSモジュール ref: http://qiita.com/items/a281c586d43db23df2f2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var imagePicker = require('imagePicker'); | |
imagePicker.openPhotoGallery({ | |
allowEditing:true, | |
success:function(e){ | |
e.media; // 取得したイメージ | |
e.original; // 編集前のオリジナルなイメージ | |
e.cropRect; // cropした領域 | |
} | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var createEditingWindow = function(image){ | |
var window = Ti.UI.createWindow({ | |
navBarHidden:true, | |
backgroundColor:'black', | |
orientationModes:[ | |
Ti.UI.PORTRAIT | |
] | |
}); | |
var flexSpace = Titanium.UI.createButton({ | |
systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE | |
}); | |
var cancel = Ti.UI.createButton({ | |
title:'Cancel', | |
style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED | |
}); | |
var choose = Ti.UI.createButton({ | |
title:'Choose', | |
style:Titanium.UI.iPhone.SystemButtonStyle.DONE | |
}); | |
var title = Ti.UI.createLabel({ | |
text:'Move and Scale', | |
color:'white', | |
font:{ | |
fontWeight:'bold', | |
fontSize:16, | |
}, | |
shadowColor:'#555555', | |
shadowOffset:{x:0.0, y:1.0} | |
}); | |
var occupiedHeight = 64; // toolbar:44 statusbar:20 | |
var platform = { | |
width:Ti.Platform.displayCaps.platformWidth, | |
height:Ti.Platform.displayCaps.platformHeight - occupiedHeight | |
} | |
var zoomScale = 1.0; | |
var contentSize = { width:image.width, height:image.height }; | |
var contentOffset = { x:0, y:0 }; | |
zoomScale = platform.width / image.width; // fit to shorter side | |
contentSize.height = platform.height / zoomScale + 2; | |
// For portrait image | |
if(image.width < image.height){ | |
// Targeting into square frame | |
contentSize.height += ((platform.height - platform.width) + 2) / zoomScale; | |
// Display centerized | |
contentOffset.y = (contentSize.height - image.height) * zoomScale / 2.0; | |
} | |
var scrollView = Ti.UI.createScrollView({ | |
top:0, | |
width:platform.width, | |
height:platform.height, | |
contentWidth:contentSize.width, | |
contentHeight:contentSize.height, | |
minZoomScale:zoomScale, | |
maxZoomScale:1.0, | |
zoomScale:zoomScale, | |
}); | |
window.add(scrollView); | |
scrollView.contentOffset = contentOffset; | |
var squareFrame = Ti.UI.createView({ | |
center:{ | |
x:platform.width / 2.0, | |
y:platform.height / 2.0 | |
}, | |
backgroundColor:'transparent', | |
borderWidth:1, | |
borderColor:'white', | |
touchEnabled:false, | |
width:Math.min(platform.width, platform.height), | |
height:Math.min(platform.width, platform.height) | |
}); | |
window.add(squareFrame); | |
var topPlate = Ti.UI.createView({ | |
backgroundColor:'black', | |
opacity:0.5 | |
}); | |
if(platform.width > platform.height){ | |
topPlate.left = 0; | |
topPlate.width = (platform.width - platform.height) / 2.0; | |
topPlate.top = 0; | |
topPlate.height = platform.height; | |
}else{ | |
topPlate.top = 0; | |
topPlate.height = (platform.height - platform.width) / 2.0; | |
} | |
window.add(topPlate); | |
var bottomPlate = Ti.UI.createView({ | |
backgroundColor:'black', | |
opacity:0.5 | |
}); | |
if(platform.width > platform.height){ | |
bottomPlate.right = 0; | |
bottomPlate.width = (platform.width - platform.height) / 2.0; | |
bottomPlate.top = 0; | |
bottomPlate.height = platform.height; | |
}else{ | |
bottomPlate.bottom = 44; | |
bottomPlate.height = (platform.height - platform.width) / 2.0; | |
} | |
window.add(bottomPlate); | |
var imageView = Ti.UI.createImageView({ | |
width:image.width, | |
height:image.height | |
}); | |
scrollView.add(imageView); | |
var toolBar = Ti.UI.createToolbar({ | |
items:[cancel, flexSpace, title, flexSpace, choose], | |
bottom:0, | |
height:44 | |
}); | |
window.add(toolBar); | |
var cropImage = function(image){ | |
var offset = { x:0.0, y:0.0 } | |
if(scrollView.contentOffset){ | |
offset = scrollView.contentOffset; | |
} | |
var x = offset.x / scrollView.zoomScale; | |
var y = offset.y / scrollView.zoomScale; | |
var w = scrollView.width / scrollView.zoomScale; | |
var h = scrollView.height / scrollView.zoomScale; | |
if(platform.width > platform.height){ | |
x -= (scrollView.contentWidth - image.width) / 2.0; | |
x += (w - h) / 2.0; | |
}else{ | |
y -= (scrollView.contentHeight - image.height) / 2.0; | |
y += (h - w) / 2.0; | |
} | |
if(x < 0.0) { | |
x = 0.0; | |
} | |
if(y < 0.0) { | |
y = 0.0; | |
} | |
return image.imageAsResized(image.width, image.height).imageAsCropped({ | |
x:x, | |
y:y, | |
width:Math.min(w, h), | |
height:Math.min(w, h) | |
}); | |
}; | |
var choosed = null; | |
choose.addEventListener('click', function(){ | |
if(choosed){ | |
return; | |
} | |
choosed = cropImage(image); | |
window.close(); | |
}); | |
cancel.addEventListener('click', function(){ | |
choosed = null; | |
window.close(); | |
}); | |
window.addEventListener('open', function(){ | |
imageView.image = image; | |
}); | |
window.addEventListener('close', function(){ | |
if(choosed){ | |
window.fireEvent('choose', { | |
media:choosed, | |
original:image | |
}); | |
}else{ | |
window.fireEvent('cancel', { | |
original:image | |
}); | |
} | |
}); | |
return window; | |
} | |
var nowOpening = false; | |
var openPhotoGallery = function(args){ | |
if(nowOpening){ | |
Ti.API.warn("imagePicker is still active. ignore this call."); | |
return; | |
} | |
nowOpening = true; | |
var allowEditing = false; | |
if(args && typeof args.allowEditing !== 'undefined'){ | |
allowEditing = args.allowEditing; | |
} | |
var success = function(e) { | |
if(allowEditing){ | |
var editingWindow = createEditingWindow(e.media); | |
editingWindow.addEventListener('choose', function(e){ | |
if(args && args.success){ | |
args.success(e); | |
} | |
nowOpening = false; | |
}); | |
editingWindow.addEventListener('cancel', function(e){ | |
if(args && args.cancel){ | |
args.cancel(e); | |
} | |
nowOpening = false; | |
}); | |
editingWindow.open({ modal:true }) | |
}else{ | |
if(args && args.success){ | |
args.success(e); | |
} | |
nowOpening = false; | |
} | |
}; | |
var cancel = function(e){ | |
if(args.cancel){ | |
args.cancel(e); | |
} | |
nowOpening = false; | |
}; | |
var error = function(e) { | |
if(args.error){ | |
args.error(e); | |
} | |
nowOpening = false; | |
}; | |
Ti.Media.openPhotoGallery({ | |
allowEditing:false, | |
success:success, | |
cancel:cancel, | |
error:error | |
}); | |
}; | |
exports.openPhotoGallery = openPhotoGallery; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment