Image Cropping in Titanium. Cross-Platform Mobile App Development.
Hello everyone, today I’m very pleased to be the first to introduce you to our technical blogs.
Today I will talk through a very common issue while developing mobile applications, image cropping. Image cropping refers to a situation where you have an image but you need to draw it in certain amount of space. For example you can have an image of 500 in width by 300 in height size but you need to place it on a square of 150 by 150.
The next article will show how to achieve image cropping on Appcelerator’s Titanium platform. Just for a quick review about Titanium, I can say it’s a mobile platform to develop cross-platform applications for iPhone, iPad, Android and mobile web, in javascript code.
To start with this example, the first step we have to achieve is resizing the image correctly. A good approach is reducing your image by a certain percentage.
The first thing is to create a function that will hold our methods to be used to calculate the size. This function will be initialized with maxWidth and maxHeight values that will represent the maximum size of our image.
<code></code><code><em>/**</em></code> <code></code><code><em>* </em><em>@param</em><em> {Integer} maxWidth "Used to indicate how much will be max width"</em> <em> * </em><em>@param</em><em> {Integer} maxHeight "Used to indeicate how much will be max height"</em></code>
<em> */</em> <code>exports.init = function(maxWidth, maxHeight) {</code>
|
To resize an image by percentage we’ll create the next function.
<code><em>/**</em></code> <em> * Method to resize an image to fit container with no size restriction</em> <em> * </em><em>@param</em><em> {Integuer} imageWidth "The desire image width"</em>
<em> * </em><em>@param</em><em> {Integuer} imageHeight "The desire image height"</em>
<em> * </em><em>@param</em><em> {Boolean} fitWidth "To set if resize must be done by starting parameter width or height"</em>
<em> * </em><em>@param</em><em> {Float} percentage "To set desire crop percentage"</em>
<em> * </em><em>@return</em><em> {Object} size {width : "The width of the new size image", height: "The height of the new size image"}</em>
<em> */</em> function resizeImageToPercentage(imageWidth, imageHeight, fitWidth, percentage) {
var newImageWidth = 0 var newImageHeight = 0; if(percentage == null && fitWidth) percentage = maxWidth / imageWidth; else if(percentage == null && !fitWidth) percentage = maxHeight / imageHeight; newImageWidth = imageWidth * percentage; newImageHeight = imageHeight * percentage; if(fitWidth) {
if(maxWidth > newImageWidth || maxHeight > newImageHeight) {
percentage = maxWidth / imageWidth; newImageWidth = imageWidth * percentage; newImageHeight = imageHeight * percentage; if(maxWidth > newImageWidth || maxHeight > newImageHeight) {
newImageWidth = imageWidth; newImageHeight = imageHeight; } } } else if(!fitWidth) {
if(maxWidth > newImageWidth || maxHeight > newImageHeight) {
percentage = maxHeight / maxWidth; newImageWidth = imageWidth * percentage; newImageHeight = imageHeight * percentage; if(maxWidth > newImageWidth || maxHeight > newImageHeight) {
newImageWidth = imageWidth; newImageHeight = imageHeight; } } } return {
width : Math.floor(newImageWidth), height : Math.round(newImageHeight), }; } |
If you notice this function will receive your image ‘s actual width and height, will receive a variable call “fitwidth” that will decide if your image will be reduced considering width first or if it should consider height instead. Percentage will be used to determine how much will the image be reduced.
First of all we have to check if percentage is not null. If is not null we make our resize calculation based on percentage received by the call to the method. In other cases we’ll calculate percentage based on the max size introduced before. When calculation is done we need to validate if the image fits our max width and max height requirement, if some value does not meet our requirement the function will try to implement its own percentage. If it still doesn’t make sense it will return image dimensions.
Now our last step is to implement it in our UI code.
To achieve this we need two requirements. An TI.UI.ImageView and a Ti.UI.View
The TI.UI.View needs to be initialized with defined width, height and border radius:
var imageContainer = Ti.UI.createView({
width : 150, <em>// Our max widht</em> height : 150, <em>// Our max height</em> borderRadius : 0, <em>// Necessary by the container to cut container </em> }); var photo = Ti.UI.imageView({
left : 0, <em>// Optional attribute used to define showing image region</em> top : 0, <em>// Optional attribute used to define showing image region</em> image : 'directoryRoute/myImage.png', }); |
So we initialize our module
var resizeModule = require("resize/resizeModule").init(150, 150);
|
Now we calculate image new dimensions.
var size = resizeModule.resizeImageToPercetage(image.width, image.height, true, 0.6); photo.width = size.width; photo.height = size.height; |
And now you’re all set and ready to test these functions. Please write your comments and share with everyone your personal solutions if you have some.
Regards.
Post Your Comment Here