なんなの、これ？

Ti.Media.openPhotoGallery()でallowEditingプロパティをtrueに設定すると、イメージを正方形でcropする編集UIが現れるのだが、大きなイメージ(1920pixelを超えるような)を扱えない。(iOSの仕様みたいなもの.)
で、大きなイメージをそのままのサイズで正方形にcropするためのCommonJSモジュール。

使い方

var imagePicker = require('imagePicker');
imagePicker.openPhotoGallery({
    allowEditing:true,
    success:function(e){
        e.media; // 取得したイメージ
        e.original; // 編集前のオリジナルなイメージ
        e.cropRect; // cropした領域
    }
});

コード(imagePicker.js)

var createEditingWindow = function(image){
    var window = Ti.UI.createWindow({
        navBarHidden:true,
        backgroundColor:'black',
        orientationModes:[
            Ti.UI.PORTRAIT
        ]
    });

    var flexSpace = Ti.UI.createButton({
        systemButton:Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
    });

    var cancel = Ti.UI.createButton({
        title:'Cancel',
        style:Ti.UI.iPhone.SystemButtonStyle.BORDERED       
    });

    var choose = Ti.UI.createButton({
        title:'Choose',
        style:Ti.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
    }

    if(platform.width > platform.height){
        alert('This device not supported.');
    }

    var zoomScale = 1.0;
    var contentSize = { width:image.width, height:image.height};

    if(image.width > image.height){
        zoomScale = platform.width / image.width; // fit to shorter side
        contentSize.width  = image.width + 2;
        contentSize.height = (platform.height + 2) / zoomScale ;            
    }else{
        zoomScale = platform.width / image.height; // fit to shorter side
        contentSize.width =  (platform.width + 2) / zoomScale;
        contentSize.height = image.height + (platform.height - platform.width) / zoomScale;
    }

    var scrollView = Ti.UI.createScrollView({
        top:0,
        width:platform.width,
        height:platform.height,
        contentWidth:contentSize.width,
        contentHeight:contentSize.height,
            minZoomScale:zoomScale,
        maxZoomScale:0.5,
        zoomScale:zoomScale,
        });
    window.add(scrollView);

    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({
        top:0,
        height:(platform.height - platform.width) / 2.0,
        backgroundColor:'black',
        opacity:0.5
    });
    window.add(topPlate);

    var bottomPlate = Ti.UI.createView({
        bottom:44,
        height:(platform.height - platform.width) / 2.0,
        backgroundColor:'black',
        opacity:0.5
    });
    window.add(bottomPlate);

    var imageView = Ti.UI.createImageView({
        center:{
            x:scrollView.contentWidth  / 2.0,
            y:scrollView.contentHeight / 2.0
        },
        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.scale;
        var y = offset.y / scrollView.scale; 
        var w = scrollView.width / scrollView.scale;
        var h = scrollView.height / scrollView.scale;

        x -= (scrollView.contentWidth - image.width) / 2.0;
        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; 
        }

        var l = Math.min(w, h);
        var cropRect = { 
            x:x, 
            y:y, 
            width:l,
            height:l
        };

        return {
            cropRect:cropRect,
            cropImage:image.imageAsResized(image.width, image.height).imageAsCropped(cropRect)
        }
    };

    var choosed = null;

    choose.addEventListener('click', function(){
        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('success', { 
                cropRect:choosed.cropRect,
                media:choosed.cropImage,
                original:image
            });     
        }else{
            window.fireEvent('cancel', {
                original:image
            });
        }
    });

    return window;
}

var openPhotoGallery = function(args){
    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('success', function(e){
                if(args && args.success){
                    args.success(e);
                }
            });

            editingWindow.addEventListener('cancel', function(e){
                if(args && args.cancel){
                    args.cancel(e);                 
                }
            });
            editingWindow.open({ modal:true })
        }else{
            if(args && args.success){
                args.success(e);
            }
        }
    };  

    var cancel = function(e){
        if(args.cancel){
            args.cancel(e);
        }
    };  

    var error  = function(e) {
        if(args.error){
            args.error(e);          
        }
    };

    Ti.Media.openPhotoGallery({
        allowEditing:false,
        success:success,
        cancel:cancel,
        error:error
    });
};

exports.openPhotoGallery = openPhotoGallery;