How do I get an image from my mobile photo library
In this lesson we are going to take a look at how we can get a image file into your stack from your mobile device photo library.
You can download the sample stack from this url: https://tinyurl.com/yatplpfq
Using the mobile 'image chooser'
Lets take a look at the basic script that we can apply to our button:
on mouseUp mobilePickPhoto "library" if the result is empty then # If the result is empty you know the user has chosen an image and you can start working with it. end if end mouseUp
The command "mobilePickPhoto" takes up to 3 parameters. The first, source, defines what type of image choose it will be:
library: It will let the user select a photo from their library
album: lets the user pick a photo from their recent camera roll
camera: lets the user take a photo using the iPhone camera
rear camera: lets the user take a photo using the rear camera (iOS only)
front camera: lets the user take a photo using the front camera (iOS only)
The second and third parameters, maxwidth and maxheight are only available on iOS and they specify the maximum allowed width and height of the image.
The selected image will appear on your stack which you can then manipulate. First of all lets just see what happens when we
1) Click our button
2) Select a photo
Creating the stack
1) Create a new stack
2) Set its width to 320 and its height to 460
3) Drag on a new button and call it "Get Photo" or something similar
4) Move it to the bottom of the stack so that there is room for our photo
What we get on iOS
1) Our app in the simulator
2) Click the button to get the Photo library up
3) Select an image
4) The image on your stack
Note: The simulator is really helpful here because it has a library of stock photos which will be really helpful as we test our app.
What we get on Android
1) Our app in the emulator
2) Click the button to get the photo gallery
3) The image on your stack
Note: The Android emulator doesn't come pre-loaded with images so you will need to add some.
Lets resize and locate the image now that we have it one our stack.
When the image is selected LiveCode creates an image on your stack based on the 'templateimage'. The templateimage is simply a way of setting up properties of the an image that is created before that happens. So in our case we will want to set the images width, height and location.
Update the script on your button to the following:
on mouseUp set the lockloc of the templateimage to true set the width of the templateimage to "300" set the height of the templateimage to "400" set the left of the templateimage to "10" set the top of the templateimage to "10" mobilePickPhoto "library" end mouseUp