LiveCode supports a wide variety of image formats, including the popular PNG and JPEG formats. You can display images in your stack, edit images and export images.
You can import images into your stack, the image becomes a LiveCode image object on the card.
To import an image choose File - > Import as Control -> Image file and select the image you want to import. Once the image is imported you can select it, move it and resize it just as you can with any other control.
You can also reference images by filename.
1. Create a stack
2. Add an image object to the stack
3. Open the Property Inspector of the image object
4. Click the folder icon next to the Source field, this allows you to select an image file stored on the file system
5. The referenced image is displayed in the image object
The advantage of referencing images by filename is that the size of your stack is not increased as the image is not a part of the stack. However if you want your users to be able to see the images you reference you will need to distribute them with your application.
Relative and Absolute Paths
You can also set the filename property of an object in script.
You can use both relative and absolute file paths for desktop applications, relative paths are always resolved in relation to the current folder. For example:
set the filename of image "logo" to "livecodelogo.png"
This works as long as the image is in the current folder. You can check what the current folder is by getting the value of the defaultFolder property.
Referencing Images on a Server
You can also set the filename property of an image to an http url. Create a new stack, and drag on an image object and a button. Name the button "Show Image" and the image object "poster". In the script of the button enter:
on mouseUp set the filename of image "poster" to "http://lainopik.on-rev.com/posterchild.jpg" end mouseUp
Apply the script, and switch to run mode. Click the button, and you should see the image displayed, and the Source referenced in the Property Inspector updated to the url.
Using the Paint Tools
In the IDE
You can use the LiveCode paint tools to create images:
1. Add an image area to the stack
2. Select one of the paint tools
3. The paint tool can be used within the image area
In a Standalone
In a standalone app your users will not have access to the Tool Palette but the paint tools can still be used to draw within an image control.
Set the Script of the image control to
on mouseEnter set the tool to "pencil tool" end mouseEnter on mouseLeave set the tool to "browse tool" end mouseLeave
This will allow the user to draw a thin line, you can set the color of the line by setting the penColor property.
You can also use the brush tool, and set the brushColor and brush properties.
You can export images from your stack using the url keyword.
put image "logo" into url ("binfile:" & specialFolderPath("desktop") & "/logo.png")
If you want to export an image in a format other than the format it is currently stored in you can use the export command.
export image "logo" to file "logo.jpg" as JPEG
Note: Referenced images cannot be exported to file using the url keyword, you can use the export command in this case.