Cut and paste (parts of) images

96 views
Skip to first unread message

Doc Snyder

unread,
Jul 6, 2019, 8:58:58 AM7/6/19
to mitappinv...@googlegroups.com
Hi there!

I am faced with the problem of creating an image consisting of parts of other images. The task to be performed is to cut a block from an image and paste it at a certain location into another image.

With the standard components it's not possible to interact with images this way.

I also searched for extension on image processing for that, but didn't found one.

Maybe operating on a canvas can help, but my image needs an alpha channel (for opacity) and I don't know whether a canvas can have opaque sections.

How can I cut out blocks of an image and paste it into another image? I would appreciate any hint.

Regards, Doc

BodyMindPower

unread,
Jul 6, 2019, 12:56:05 PM7/6/19
to MIT App Inventor Forum
try Taifun's Image extension:

Chris Ward

unread,
Jul 6, 2019, 1:30:57 PM7/6/19
to MIT App Inventor Forum
Hello Doc

If this is an App on a Smartphone, it will be difficult to give the User a great experience. However, some phones do have cropping ability in their screenshot/camera Apps, so of course it can be done. You might try a search for a web-based solution that can be run in a Web Viewer component.

José Macías

unread,
Jul 6, 2019, 1:39:45 PM7/6/19
to MIT App Inventor Forum
Gracias

Doc Snyder

unread,
Jul 7, 2019, 6:02:32 AM7/7/19
to mitappinv...@googlegroups.com
@BodyMindPower
As I wrote, I didn't find any extension solving the problem.
Of course, I tried TaifunImage as well, but it only allows overlays of images identical in size (no insertion of a smaller block).

@Chris Ward
Looks like a web-based approach is the only option. Thanks.

If there would be a chance to get/set individual pixels of an image, I would implement the desired operations by myself.
But, I couldn'd find such methods as well.

BodyMindPower

unread,
Jul 7, 2019, 6:52:35 AM7/7/19
to MIT App Inventor Forum
Perhaps Taifun's and Mika's extension can be combined to achieve the goal. But what exactly is the goal, I do not know.

Chris Ward

unread,
Jul 7, 2019, 7:55:35 AM7/7/19
to MIT App Inventor Forum
Hi Doc

Try this Google Search: "javascript image crop cut paste"


Message has been deleted

Doc Snyder

unread,
Jul 7, 2019, 5:20:39 PM7/7/19
to MIT App Inventor Forum
@BodyMindPower
Thanx a lot for the links!
At a first look, they appear pretty well.
I will explore them regarding my prpblem.
Exactly, I want to do this: I got a position marker for a map. The goal is to personalize the marker with an image of a person. For this reason I want to paste a round image (of a person) into the round part of the position marker. That's it.

@Chris Ward
JavaScript would be another option, of course. But also it seems to be much more work to be done compared with using an extension. Anyhow, I will google for it, using your suggested keywords. Thanx!

TimAI2

unread,
Jul 7, 2019, 7:10:11 PM7/7/19
to MIT App Inventor Forum
If you have a server running imagemagick you could use it to create the images

TimAI2

unread,
Jul 8, 2019, 5:26:29 PM7/8/19
to mitappinv...@googlegroups.com
Continuing the idea of using a server with imagemagick....

This is work in progress, but an example of what can be done. You will need an external server running php and imagemagick to do this

Create a php file for the server. In my example below I have hard coded the "marker" image and the "face" image which I uploaded to the server. The "face" images can be uploaded on the fly. The php  would probably need to save each file sent for AI2 to use individually, but in my case here I have simply generated a file that can be called directly by an image or marker component.

The imagemagick command grabs the center square of any image and then makes it a circular image. This is then composited onto the marker image. I used png as the image format to allow it to be shown as an image picture. The marker should be able to handle an svg.

I have imagemagick guru Fred Weinhaus to thank for his help on making the convert command a one liner 

PHP file example:

<?php
  header('Content-Type: image/png');

  passthru( "convert marker.png \( -define jpeg:size=200x200 face.png -thumbnail 31x31^ -gravity center -extent 31x31 \( +clone -threshold -1 -negate -fill white -draw 'circle 15,12 12,0' \) -alpha off -compose copy_opacity -composite \) -geometry +0-7 -compose over -composite png:-" );
?>

BLOCKS

blocksfacemarker.png

(Yes, it really is that simple - just call the php file and the image appears - image magick !!)


SCREEN


screenfacemarker.png


The image generated retains the same dimensions as the original marker: 31x51 pixels


Plenty more to do on this: the upload, saving and downloading of image files, adjustment to script to accept parameters, getting users to take selfies with their face in the middle of the picture!, deciding how the images can be reused once created....




Chris Ward

unread,
Jul 8, 2019, 7:34:00 PM7/8/19
to MIT App Inventor Forum
@ Tim - fantastic stuff!

Doc Snyder

unread,
Jul 9, 2019, 2:53:00 AM7/9/19
to MIT App Inventor Forum
@TimAI2

Wow! Great solution! Thanx!
I am still on my way to solve it locally via extensions, but propably I would try your ImageMagick solution.

SteveJG

unread,
Jul 9, 2019, 9:15:01 AM7/9/19
to MIT App Inventor Forum
You want to place a map Marker that has an image in the donut hole?   Why not use the MIT Map component and create custom Markers?  Make the images using your PC graphics program for each individual and display them using 

ImageAsset
Sets or gets the image shown for the marker. If set to the empty string "", then the default marker icon will be used.

as described here Marker


Regards,
Steve

Doc Snyder

unread,
Jul 9, 2019, 2:04:16 PM7/9/19
to MIT App Inventor Forum
Thank you, SteveJG.
I would have done it this way, but I want to allow everybody owning the app to create his specific avatar at run-time (not using PC tools).
Reply all
Reply to author
Forward
0 new messages