resizing image from mobilepicklibrary

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
cusingerBUSCw5N
Posts: 339
Joined: Wed Jul 11, 2012 9:24 pm

resizing image from mobilepicklibrary

Post by cusingerBUSCw5N » Tue Oct 16, 2012 2:49 pm

I am great at ftp'ing distorted pictures of flowers from my Android to an outside server.

In my app, the user chooses an image from their mobile device (android in this case) - so I am using mobilepicklibrary. I think you have to set the templateimage size before the person picks the image. But then if the image is larger than your original settings, the image is all distorted. So, I tried resizing it after it came in (since I don't know what they're going to pick before mobilepicklibrary).

I wasn't successful changing the original templateimage after an image was imported, so I thought I could create a second image with the correct size and bring the first image into it.

Nice idea...but it isn't working.

I can get the ratio (which is confusing - because Androids seem to display their images sideways, so their length is my width...anyway...that's why the formula below is backwards...) But now the new image is just the full size - a big mess on the screen. - it seems to ignore all my settings (top, left, width, etc).

And while I'm at it -if this image is saved or ftp'd, what sizes are being saved? the original size before mobilepicklibrary, the one in the original template, or the one that I theoretically resized?

I found some info that lets the user resize the image (with a stack called: stresizeimage.livecode), but it was all based on reading a .png file. I will usually have .pngs - but not necessarily - so the solution isn't matching what I need.

Here is my code

Code: Select all

      if the environment is "mobile" then
         
   //sets loc/size of image on stack
   set the lockloc of the templateimage to true
    set the width of the templateimage to "200"
    set the height of the templateimage to "350"
    set the left of the templateimage to "130"
    set the top of the templateimage to "445"

   // select image from phone image library
    mobilepickphoto "library"
   
   // names image "libimage"
    set the name of last image to "libImage"
    
put the formattedwidth of last img into ttWidth
put the formattedheight of last img into ttHeight
put ttheight/ttwidth into tratio
set the width of image "templateimage3" to "100"
set the height of image "templateimage3" to 100*tratio
set the left of image "templateimage3" to "230"
set the top of image "templateimage3" to "225"

put image "libImage" into image "templateimage3"
end if
answer "done"
As usual.... thank you for helping me out of my hole.

Klaus
Posts: 14177
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Re: resizing image from mobilepicklibrary

Post by Klaus » Tue Oct 16, 2012 3:43 pm

Hello again :D

Since I was also weak in math, I once figured out a cool function to handle correct resizing
of images and videos. Can't actually explain how it works, but it does 8)

tW = target widht = the maximum width you don't want to exceed!
tH = target height = the maximum height you don't want to exceed!
w = actual width (formattedwidth)
h = actual height (formattedheight)

Code: Select all

function mk_makeratio tW,tH,w,h
  put min (tW/w,tH/h) into tscaleFactor
  return round(w * tscaleFactor) & "," & round(h * tscaleFactor)
end mk_makeratio
Use it like this:

Code: Select all

...
put the formattedwidth of img "your image here" into w
put the formattedheight of img "your image here" into h
put 100 into tW
put 100 into tH
put mk_makeratio(tW,tH,w,h) into new_imagesize
put item 1 of new_imagesize into newW
put item 2 of new_imagesize into newH
lock screen
set the width of img "your image here" to newW
set the height of img "your image here" to newH
## set top/left/loc etc...
unlock screen
...

Best

Klaus

cusingerBUSCw5N
Posts: 339
Joined: Wed Jul 11, 2012 9:24 pm

Re: resizing image from mobilepicklibrary

Post by cusingerBUSCw5N » Tue Oct 16, 2012 4:09 pm

oh yes.... it works great!

Thank you :D

m1BUSwIgg
Posts: 9
Joined: Wed Jun 20, 2012 4:41 am

Re: resizing image from mobilepicklibrary

Post by m1BUSwIgg » Fri Oct 26, 2012 11:09 pm

Hi Klaus,

Your script works well for proportionally resizing an image. Thanks. However, since this is resizing, once you pass the image off to another image container, or perhaps in the above case an URL for FTP'ing, the image object that is uploaded is still at the original size. If I am to understand correctly the example you have provided resizes imageData and not the image object itself.

What I am at a loss for at the moment is a method for resizing the image object, in effect resampling instead of resizing. I've been scouring the dictionary, user guide and forums to no avail. I was thinking it would be technically possible to resize an image and then use import/export snapshot, but that seems more like a work around than the proper way, since you are at that point dealing with the possible degradation of a screen capture.

Any thoughts?

btw, I am aware that you can define the maxwidth and maxheight property of mobilePickPhoto, but that is currently iOS only. I would prefer a solution that is android compatible too. I have a feeling there's something simple I am missing.

doobox
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 284
Joined: Tue May 24, 2011 11:47 pm

Re: resizing image from mobilepicklibrary

Post by doobox » Sat Oct 27, 2012 12:58 am

Is this what your looking for ?

Code: Select all

set the height of img "your image here" to newH
## set top/left/loc etc...
set the imagedata of img "your image here" to the image data of img "your image here"
unlock screen
Just before unlocking the screen you can set the image data permanently.

Sorry if i misunderstand you issue.
Kind Regards
Gary

https://www.doobox.co.uk

m1BUSwIgg
Posts: 9
Joined: Wed Jun 20, 2012 4:41 am

Re: resizing image from mobilepicklibrary

Post by m1BUSwIgg » Sat Oct 27, 2012 5:04 am

Thanks for the response Gary.

While that seems to work from image to image, it didn't seem to work when putting it to an URL. Following your suggestion and after unlocking the screen:

Code: Select all

put image "your image here" into URL theURL
I did have success however not with your solution, but with the export command. After resizing last image:

Code: Select all

export last image to URL theURL as JPEG
And by setting resizeQuality before resizing and JPEGQuality before export, I think I can control the resizing/sampling quality and compression of the exported image.

Does this sound feasible?

m1BUSwIgg
Posts: 9
Joined: Wed Jun 20, 2012 4:41 am

Re: resizing image from mobilepicklibrary

Post by m1BUSwIgg » Tue Oct 30, 2012 10:24 pm

I've had a chance to explore this a little more.

First off - Gary I was able to get your suggestion working using both "put" and "export" methods (it was a syntax error on my part). So the overall combination of Klaus' and your suggestion works for what I am looking to accomplish in a general sense.

However, what I have found so far is that resizing images using any other method than setting maxWidth and maxHeight on mobilePickPhoto results in on-device (not in-simulator) processing times that are significantly longer. I am referring to the time it takes from pressing the "Use" button after snapping a picture in iOS to returning to the main card from which mobilePickPhoto was initiated.

After some informal testing using an iPhone 4 as the minimum hardware requirement, specifying maximum image dimensions of 1000x1000 for mobilePickPhoto resulted in processing times of an acceptable 4 seconds when creating a jpg via the export method. Also, setting resizeQuality of templateImage to "Best" (for optimal image resampling) and setting JPEGQuality of the final resized image to 80 (for better image compression) had little to no impact on processing time. As an aside, using the export method with png was approx. 9 seconds, while using the "put" method with png resulted in approx. 3.5 - 4 second times.

Using the above Klaus + Gary suggestion and my various parameters above resulted in processing times that were significantly slower - in the 15 to 18 second range, which is not acceptable for effective usage. To make matters worse, setting the resizeQuality of templateImage to "Best" severely impacts times to the tune of 1 min 13 secs to complete the task - completely unusable.

To eliminate resizing the image after the fact as the culprit in the longer processing times, I set the width and height properties of templateImage to 747x1000 (proportional to native full image) with no after the fact resizing. To my surprise, there was little difference in the times - 14 seconds as opposed to the above 15 seconds.

So my questions are:
a) is there another resizing method someone can point me in the direction of?
b) is it possible to achieve similar processing times to using the mobilePickPhoto method (i.e. 4 second range)?

Here is some broader context of what I am trying to achieve:
1) resize images to a preferred size with acceptable on-device processing times
2) obtain optimal image quality
3) obtain optimal compression
4) cross platform solution (mainly compatibility with android)

Obviously the hardware is capable of achieving the desired results in a reasonable amount of time. At this point I am trying to ascertain whether this is a Livecode limitation or simply my inexperience.

Note: the above tests are part of a 2 part process. Part 1 - obtaining and resizing the image. Part 2 - uploading the resulting image via ftp to a server. The times above do not include Part 2 (upload times).

Any help would be greatly appreciated.

m1BUSwIgg
Posts: 9
Joined: Wed Jun 20, 2012 4:41 am

Re: resizing image from mobilepicklibrary

Post by m1BUSwIgg » Thu Nov 01, 2012 6:07 pm

I have further elaborated on my testing with specific code here:
http://forums.runrev.com/viewtopic.php?f=49&t=13250

Post Reply