App Inventor Extensions


Image Extension

See the App Inventor Extensions document about how to use an App Inventor Extension.

For questions about this extension or bug reports please start a new thread in the App Inventor Extensions forum. Thank you.

For feature requests please contact me by email. To be a sponsor of a new method already is possible starting from only 10 USD! With your contribution you will help the complete App Inventor community. Thank you.

Mar 22th, 2016: Initial Version 1 as of 2016-03-22 for App Inventor version ai2extensions7 and Companion version 2.36cdk1

Aug 11th, 2016: Version 1a: avoid DX execution failed error: build each extension separately

Aug 17th, 2016: Version 2: crop method added

Jan 26th, 2016: Version 3: Enable jpeg for all methods, new method Rotate added

March 8th, 2016: Version 4: IsLandscape, Scale and Overlay methods added

Description

Image Extension for basic image manipulation.
Required permissions: android.permission.READ_EXTERNAL_STORAGE, android.permission.WRITE_EXTERNAL_STORAGE

Properties


Returns whether Warnings should be suppressed


Specifies whether Warnings should be suppressed

Methods


Resize a jpg image file.

You can use a relative path or a complete path to the image file. To use a relative path, just prefix the imageFileName with /. For instance /myFile.jpg will shrink the file /mnt/sdcard/myFile.jpg. You can't shrink files in the assets. If a fileName starts with file:/// you can specify a complete path to the file.
Thank you Tanja for being the sponsor of this block!


Rotate a jpg image file by 0, 90, 180 or 270 degrees in clockwise direction.

You can use a relative path or a complete path to the image file. To use a relative path, just prefix the imageFileName with /. For instance /myFile.jpg will rotate the file /mnt/sdcard/myFile.jpg. You can't rotate files in the assets. If a fileName starts with file:/// you can specify a complete path to the file.
Thank you teen-code.com for your generous donation!


Crop Image. Enter the distance in pixel for left, top, right and bottom.
Thank you Husain for being the sponsor of this block!


Create chunks of a jpg image file.

For example rows=4 and columns=3 will create 12 chunks of the original image, see screenshot

The chunks will be stored in the same directory as the original image file. The following name convention will be used: imageFileName_rowNumber_columnNumber.jpg.


You can use a relative path or a complete path to the image file. To use a relative path, just prefix the imageFileName with /. For instance /myFile.jpg will create chunks of the file /mnt/sdcard/myFile.jpg. You can't create chunks from files in the assets. If a fileName starts with file:/// you can specify a complete path to the file.


Return true if image is in landscape format, else return false.


Scale a jpg image file.
You can use a relative path or a complete path to the image file. To use a relative path, just prefix the imageFileName with /. For instance /myFile.jpg will shrink the file /mnt/sdcard/myFile.jpg. You can't scale files in the assets. If a fileName starts with file:/// you can specify a complete path to the file. The parameter scalingLogic expects the value FIT or CROP. CROP keeps the aspect ratio, resulting either in the width or the height of the source image being cropped.
Thank you Andreas for the scaling tutorial and the image scaling code sample project.


Overlay images.
The second image should be an image in png format with transparency to get the overlay effect.
Thank you Christian for being the sponsor of this block!

Events


Event indicating that chunks have been created. A list of filenames will be provided as result.


Event indicating that image has been rotated.
Parameter successful is indicating true (successful) or false. Parameter result provides error message in case of error or filename in case of success.


Event indicating that image has been scaled.
Parameter successful is indicating true (successful) or false. Parameter result provides error message in case of error or filename in case of success.

Example Use: Resize

before resize

after resize

Note: the larger image (on the left) looks like it is smaller compared to the shrinked image (on the right). I currently do not know why this happens, actually the same size in the image component should be displayed...


Some more blocks to get the current image size, width and height using the Image Metadata Extension


Example Use: Create Chunks



displaying chunk # 5 out of 12 chunks created (4 rows and 3 columns)


Example Use: Crop


Example Use: Rotate


Example Use: Scale and Overlay

An example overlay image in png format, here size 1200x1800 (portrait), transparent background.

Scale an image exactly to the size you need and at the same time crop the image to keep the aspect ratio, then add an overlay image (could be for example a watermark or similar).

Do you need help with your App Inventor project?

I can help you: for one hour I charge 25 USD.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.

Terms and Conditions

Download


Developing and maintaining snippets, tutorials and extensions for App Inventor takes a lot of time.
I hope it saved some of your time. If yes, then you might consider to donate a small amount!

Donation amount:

or donate some mBTC to Bitcoin Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Bitcoin

Thank you! Taifun
 

Download TaifunImage extension (aix file)

Download Resize test project (aia file)
Download Create Chunks test project (aia file)
Download Crop test project (aia file)
Download Rotate test project (aia file)
Download Scale & Overlay test project (aia file)

Back to top of page ...

Creative Commons License
This work by Pura Vida Apps is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.


Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact