Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Can photos be resized on the device?

I am developing an app that allows users to upload photos from their iPhone photo gallery and camera app. Unfortunately, these images can be quite large and take a long time to upload, even over a 3G connection.

Is there any way to resize the photo on the device before sending it to the server?

Thanks in advance :)

— asked April 8th 2010 by Dave Garbus
  • image
  • iphone
  • photo
  • resize
0 Comments

7 Answers

  • Accepted Answer

    Try this, it seems to work…

    Titanium.Media.openPhotoGallery({
        success:function(event) {
            var image = event.media;
    
            Ti.API.info(image.height +' x '+ image.width);
    
            var imageView = Titanium.UI.createImageView({
                image:image,
                width:480,
                height:640
            });
    
            image = imageView.toImage();
            Ti.API.info(image.height + " x " + image.width);
    
    }});
    
    — answered April 17th 2010 by Joel Bohrer
    permalink
    3 Comments
    • For uploading purpose, important to change the following

      image = imageView.toImage();
      

      to

      image = imageView.toImage().media;
      

      — commented February 6th 2012 by Derek Chai
    • the opposite ended up working for me (imageView.toImage() not imageView.toImage().media):

      var image = event.media;
      
      Ti.API.info(image.width +' x '+ image.height);
      
      //resize image (camera's default size is huge 768x1024 at 8 megapixels')
      var imgV = Titanium.UI.createImageView({
          image:image,
          width:375, //768x1024 proportionally scales to 480x640, 375x500, 240x320, 180x240
          height:500 //240x320 for CoverFlow? 
      });         
      //image = imgV.toImage().media;
      image = imgV.toImage();
      
      Ti.API.info(image.width +' x '+ image.height);
      

      Here's the error message I got with toImage().media:

      /*  
          [WARN] Exception in event callback. {
              expressionBeginOffset = 2422;
              expressionCaretOffset = 2427;
              expressionEndOffset = 2434;
              line = 80;
              message = "Result of expression 'image' [undefined] is not an object.";
              name = TypeError;
              sourceId = 175233736;
          }
      */
      

      In any case, one version worked for what I needed. Thanks for posting!

      — commented March 20th 2012 by Tim Shayakhmetov
    • Neither imageView.toImage(); or imageView.toImage().media; worked for me. I am using the exact same code as above and it not working. :(

      — commented July 10th 2012 by Douglas Alves
  • You can use Appcelerator's free ImageFactory module from the market place:

    https://marketplace.appcelerator.com/apps/1184

    — answered February 6th 2012 by Pedro Enrique
    permalink
    1 Comment
    • It is not free. You need to be an indie developer…

      — commented February 21st 2012 by James -
  • I'm using e.media.imageAsResized(e.media.width / 2, e.media.height / 2); to cut the image height/width in half. Worth a shot

    — answered July 17th 2012 by Joey Zhou
    permalink
    0 Comments
  • Check out this one

    // testend on iOS
    
    var win = Ti.UI.createWindow();
    
    
    win.open();
    
    // the desired image widths
    var imageSizes = [1200,800,600,200];
    
    // open the photo gallery
    Titanium.Media.openPhotoGallery({
    
    // if success:
        success:function(event){
            // this is the image chosen
            var myImage = event.media;
            if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO){
                // let's loop through that array
                for(var i = 0; i < imageSizes.length; i++){
                    // create a new file
                    var file = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, 'image'+i+'.png');
                    // get the width from the array
                    var newWidth = imageSizes[i];
                    // write the file as toImage()
                    file.write(
                        Ti.UI.createImageView({
                            image:myImage, //file name
                            width:newWidth, // file new width
                            height:(newWidth/myImage.width)*myImage.height // some math to get the height
                        }).toImage()
                    );    
                    // done, loop again
                }        
            } else {
    
            }
        },
        cancel:function(){
    
        },
        error:function(error){
        },
        mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
    });
    
    — answered August 30th 2011 by Pedro Enrique
    permalink
    0 Comments
  • Hi,

    Javascript ist capable of resizing images, even in a content aware fashion:
    http://labs.pimsworld.org/wp-content/uploads/2009/04/demo-content-aware-image-resizing-2/

    Search for javascript, canvas, resize on your favorite search engine :)

    — answered April 8th 2010 by Sebastian Herp
    permalink
    1 Comment
    • sounds like a performance killer

      — commented July 5th 2012 by Pablo Albrecht
  • This only works if you're working directly with a captured image.

    I was looking for a generic resize and crop of images once loaded into an image view, but no such luck – at least not on android. There is an undocumented function that does help ios only and I updated another post with some android module code.

    — answered September 1st 2011 by Eric Z
    permalink
    0 Comments
  • yes, there are actually more than one way to do this.
    http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Blob-method-imageAsResized

    imageAsResized, imageAsCropped,imageAsThumbnail

    var blob = f.read();
    photo = blob.imageAsResized(blob.width / 4, blob.height / 4);
    
    — answered January 31st 2013 by Keith Levi Lumanog
    permalink
    1 Comment
    • test image

      — commented February 21st 2013 by Appcelerator Good Boy
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.