Skip to content

Instantly share code, notes, and snippets.

@atsusy
Created July 3, 2012 23:51
Show Gist options
  • Save atsusy/3044207 to your computer and use it in GitHub Desktop.
Save atsusy/3044207 to your computer and use it in GitHub Desktop.
PhotoGalleryで選んだイメージをフルサイズで編集できるCommonJSモジュール ref: http://qiita.com/items/a281c586d43db23df2f2
var imagePicker = require('imagePicker');
imagePicker.openPhotoGallery({
allowEditing:true,
success:function(e){
e.media; // 取得したイメージ
e.original; // 編集前のオリジナルなイメージ
e.cropRect; // cropした領域
}
});
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