Image (cropping) CommonJS lib for Titanium

CROP.md

Often I need to display a user-provided picture in an ImageView in such a way that the whole ImageView is filled with as much of the picture possible.

This is how I do it:

var image = require('image');

Ti.Media.showCamera({
        mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO],
        success: function (e) {
                myImageView.image = image.crop(e.media, myImageView.rect);
        }
});

Take a look at the next image.js file to learn how it works.

Params

• blob: The Ti.Blob containing the image.
• options: Either an object (or Dimension) containing the target width and height and the other options listed below, or a Number representing only the width.
• height: The target height.

Options

• width: See above.
• height: See above.
• pixels: Set to FALSE to disable converting target dimensions to actual pixels needed for either Retina or Android variable DPI.
• fix: Set to FALSE to disable the workaround for bug TIMOB-4865.

image.js

var _factor;

function crop(blob, options, height) {

    if (typeof options !== 'object') {
        options = {
            width: options,
            height: height
        }
    }
    
    if (!blob.width || !blob.width) {
        return blob;
    }
    
    // https://jira.appcelerator.org/browse/TIMOB-4865
    if (options.fix !== false) {
        blob = blob.imageAsResized(blob.width, blob.height);
    }
    
    if (options.pixels !== false) {
        options = pixels(options);
    }
    
    if (options.width && options.height) {
        var blob_ratio = blob.width / blob.height;
        var ratio = options.width / options.height;

        if (blob_ratio !== ratio) {
    
            // Cut left and right
            if (blob_ratio > ratio) {
                blob = blob.imageAsCropped({
                    width: Math.round(blob.height * ratio),
                });
            }
            
            // Cut top and bottom
            else {
                blob = blob.imageAsCropped({
                    height: Math.round(blob.width / ratio)
                });
            }
        }

        if (blob.width !== options.width || blob.height !== options.height) {
            blob = blob.imageAsResized(options.width, options.height);
        }
        
        return blob
        
    } else {
        return blob.imageAsCropped(options);
    }
}

function pixels(dimension) {
    
    if (typeof dimension === 'number') {
        return dimension * pixelFactor();
    }
    
    if (dimension.width) {
        dimension.width = dimension.width * pixelFactor(); 
    }
    
    if (dimension.height) {
        dimension.height = dimension.height * pixelFactor(); 
    }
    
    return dimension;
}

function pixelFactor() {
    
    if (!_factor) {
        _factor = 1;
        
        if (Ti.Platform.name === 'iPhone OS') {
            
            if (Ti.Platform.displayCaps.density === 'high') {
                _factor = 2;
            }
            
        } else if (Ti.Platform.name === 'android') {
            _factor = (Ti.Platform.displayCaps.dpi / 160);
        }
    }
    
    return _factor;
}

exports.crop = crop;
exports.pixels = pixels;
exports.pixelFactor = pixelFactor;

Is there a 'simple' way to use this with remote images (URLs) or do I need to download each image first and then load it into a blob?

EDIT:

I was able to get it working doing the following:

var image = require('image');
$.logo.image = 'http://somedomain.com/someimage.png';
$.logo.image = image.crop($.logo.toBlob(), {
    width: Ti.Platform.displayCaps.platformWidth, // a width of Ti.UI.FILL does not work
    height: ($.logo.height * Ti.Platform.displayCaps.logicalDensityFactor) // scale correctly
});

@sschueller I think you'd indeed need to download the image. I'd have hoped https://jira.appcelerator.org/browse/TIMOB-2409 was implemented by now :(