Fancy Crop
a Canvas Background Image
INTRO
In previous posts:
I have demonstrated how it is possible to control the size of a canvas from image dimensions, how to "move" the background image to the foreground for editing, and how to "square" an image from landscape or portrait. I now pull all of these together, and in addition show how you can carry out "fancy" croppings (e.g. circle, star, arrow) of the canvas foreground image. All of this is done without any extensions, just using the default/built-in blocks and components provided in App inventor, and can operate offline.
I am aware of the extension provided by Marco Tanzi, that does a similar thing in terms of the fancy crops to images, using javascript canvas in the background. My effort is not intended as the default or best solution, certainly not the quickest, but is simply about doing what can be done with App Inventor alone.
The demo app shows the option to select an image, either, portrait, landscape or square. Once selected you then crop the image to square, which takes a little time, due to the pixel conversion. Following that you can select a fancy crop, and that crop is actioned, the default being a transparent background to the crop.
I have not included it in the demo, but it is then possible to save out the image to file, if saved as a png the transparent background is retained.
The fancy crop examples I have included, are for example, a developers imagination is the only limit here...
BLOCKS
VIDEO
fancycrop.webm