Embedded Files
Imagemagick has hundreds, no, thousands, no...infinite opportunities, for modifying, creating and transforming images and text. Usually run from the command line, an API is also provided through php for running on linux servers. This opens things up for making use of Imagemagick with AI2 apps, whether it be for user generation, or for app development. There are several extensions for handling image manipulation, most notably Taifun's Image Extension and Metadata Extension, along with Mika's Image Editor, but neither of these come even close to what can be done with Imagemagick (however I will recommend Taifun's Image Extension for use in the Imagemagick process later).
It would be nigh on impossible to provide a point and press UI to handle all the options for Imagemagick, it therefore makes sense to cherry pick for specific requirements or to provide a library (IM Examples) and to set the parameters in text.
The aim here is to show what is required to make use of Imagemagick, and then some examples of how it could be used in apps, some of these based upon developer requests / enquiries on the forums. I have not included any options for batch processing of images, but this could be done using a version of the file by file method.
For speed and bandwidth, try to keep output images as small as necessary/possible. Remember the screen size of android devices.
SETUP
SETUP
API Requirements:
API Requirements:
A Linux Server with a LAMP installation (php installed)
Imagemagick and php-imagick installed on the server
sudo apt install imagemagick php-imagick
Modification to "Delegates" or "Policy" to allow for use of http/https
In order to access images from urls, you may need to edit the imagemagick policy.xml
You need to edit these two lines (if they are not there, put them in) from this:
<policy domain="delegate" rights="none" pattern="HTTPS" />
<policy domain="delegate" rights="none" pattern="HTTP" />
to this:
<policy domain="delegate" rights="read | write" pattern="https" />
<policy domain="delegate" rights="read | write" pattern="http" />
Creation of php files to handle image/text requests and return the output.
I have only created 3 php files so far, one to handle the upload and processing of an image, one to handle the processing of a text, and one to handle the upload and processing of an image on an external resource (Google Drive). The php files will be shown in their respective sections below. No data/images are stored on the server, and the returned processed image must be saved as a file. For these examples all output files are returned as png .
Provision of any required fonts
By default a Linux server only has a couple of standard fonts installed (it has no GUI). Therefore you can choose to install more fonts on the server, or simply upload font files to an accessible directory, and include the path to the font in the command.
APP Requirements:
APP Requirements:
Web component
For image upload we use the POSTFILE block
For text upload we use the GET block
For image URLS we use the GET block
Permission to write to the sdcard (android.permission.WRITE_EXTERNAL_STORAGE)
Taifun Image extension (to allow for file resizing before uploading)
Mobile devices using a data connection may not want to be uploading large files from their camera, therefore it may make more sense to resize the image before uploading, to something more sensible like 1024 pixels (maxheight or maxwidth, depending on orientation).
Taifun File extension (to allow for copying files to sdcard/conversion of files to correct format)
The Image extension cannot resize files stored in assets, so these must be copied to the sdcard. The image extension can also only work with jpg, therefore files in other formats (png/gif) should be "moved" and renamed to that format before resizing. (Any transparency is lost if converting from png/gif to jpg)
BLOCKS and PHP CODE
BLOCKS and PHP CODE
I will show below the php file and the blocks required for each approach. The Web1.GotFile blocks are the same for all three types, simply setting Image1.Picture to the file returned (imtmp.png). For simplicity's sake, I have built the convert command in join blocks so you can see all the elements. in practice, it would make more sense to return the intended command to a textbox, so that the user could edit it before sending for conversion, and you would probably be using variables for the various parts of the command - e.g. the original filename.
IMAGES
IMAGES
<?php
header('Content-Type: image/png');
$data = file_get_contents('php://input');
$filename = $_GET['filename'];
$command = $_GET['command'];
if (file_put_contents($filename,$data)) {
if (filesize($filename) != 0) {
passthru( $command );
}
}
if (!unlink($filename)) {
}
else {
}
?>
Google Drive
I have split up the google drive file to two parts, in order that I can simply use the file ID returned by a script from google. Because this one all happened on the web you can use larger file sizes stored on google.
<?php
header('Content-Type: image/png');
$url = $_GET['url'];
$id = $_GET['id'];
$url = $url."&id=".$id;
$data = file_get_contents($url);
$filename = $_GET['filename'];
$command = $_GET['command'];
if (file_put_contents($filename,$data)) {
if (filesize($filename) != 0) {
passthru( $command );
}
}
if (!unlink($filename)) {
}
else {
}
?>
TEXT/LABELS/CAPTIONS
TEXT/LABELS/CAPTIONS
<?php
header('Content-Type: image/png');
passthru( $_GET['command'] );
?>
For the conversion of text, and to make labels and captions, the command passes the properties and the text, in the above example the word "AppInventor", and returns an image in the same way as image conversions
CONCLUSION
CONCLUSION
The ability to be able to use ImageMagick through Appinventor opens up a world of possibilities for image manipulation and conversion, and for the creation of image labels and images of text. It will help to overcome some of the blockages developers find when creating their apps.
Refer to IM EXAMPLES for ideas about what can be done
Examples Pages on METRIC RAT
Page updated
Google Sites
Report abuse