Cut and paste (parts of) images

[Doc Snyder]

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]

try Taifun's Image extension:

https://puravidaapps.com/image.php

[Chris Ward]

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]

Gracias

[Doc Snyder]

@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]

Perhaps Taifun's and Mika's extension can be combined to achieve the goal. But what exactly is the goal, I do not know.

https://community.thunkable.com/t/free-image-editor-extension-no-internet-connection-required/2495

https://sourceforge.net/projects/released/files/com.NMD.ImageEditor.aix/download

[Chris Ward]

Hi Doc

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

[Doc Snyder]

@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]

If you have a server running imagemagick you could use it to create the images

https://imagemagick.org/Usage/api/

[TimAI2]

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

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

SCREEN

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]

@ Tim - fantastic stuff!

[Doc Snyder]

@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]

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]

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).