Combine two images

1

Hi, what will be the best control to combine two images and then upload as one image.
NO PhoneGap. Just plain web.

I have an image, like a frame, the user takes a photo or selfie, then I want to superimpose the photo on the larger frame and if it looks good, upload it as a single, combined image.
I already have the picture taking and uploading working. Not sure what to use for combining the two pictures.

Thanks,
Mario

2

You should be able to do this using a PictureBox.
https://wiki.nsbasic.com/PictureBox

You can use addImage to add the background to the PictureBox, then use it again to paste the selfie on top of the background.

toDataURL() can then be used to grab the result and make a png.

3

Thanks for your fast response.
Is it possible to adjust the background image so it looks always good regardless of device.
If the background image is 2448 (w) by 3264 (h)

I see an example where there are 8 extra parameters
pb.addImage(e.target.result,0,0,0,0,0,0,PictureBox1.width,PictureBox1.height)

Where can I get an explanation of what they are?
the last four seem to by x,y,w,h of the picture added.
What are the 0,0,0,0?
Is that something that can be used to scale the image?

4

The PictureBox is really an HTML Canvas element. It has a lot of features - more than are covered in the AppStudio docs.

Here’s a place to get started: