Fix crop box on image canvas?

[HerrimanCoder]

The built-in example Cropper with fixed crop box does 90% of what I need. I'm just not sure how to achieve the remaining 10%. Instead of the background canvas being a checkerboard, I want it to be another image, so that I can position a region of image number 2 within a fixed region of image number 1 (the background canvas). Very similar to the Paste Into functionality in Photoshop. As in, you define a region on an image, then paste into that region with another image, and move it around until you have the desired cropping of the 2nd image into the 1st image.

Let me describe it pictorially. I want my cropper canvas to look like this:

That entire canvas is simply 1 PNG image. In the linked sample the canvas isn't an image but the checkerboard pattern. Notice the blue border: that is my crop region, which I will set to be fixed. Just as in the demo linked above, the canvas will be immovable, but you'll be able to move around a 2nd image within the cropping area until it's positioned as desired by the user.

Now I have a 2nd image:

And now I want to position and move the 2nd image within my chosen/fixed region (indicated by the blue border) of the original background image/canvas. So the final result might be something like this:

And finally I want to capture the merged image (the entire thing, including the original background/canvas and the portion of the 2nd image positioned within the cropping area) and be able to save it as a PNG or JPG.

One more distinction from the linked sample: Outside the crop box I want to see only the original/background/canvas image; I do not want to see any portion of the 2nd image. Inside the crop box I want to see only the 2nd photo and be able to drag it around, and position it. In the linked example it's not quite that way.

How is it done?

[fengyuanchen]

Base on your requirement, I think you may need another library, this library may not fit your purpose.

[HerrimanCoder]

Fen: I really feel like your excellent library does 90% of what I need; I'm just trying to fill that last 10%, which I can hand-code if necessary. Specifically, given your fixed-crop-box.html example, if I could tweak 2 things I would be home free:

1. Make the canvas an image of my choice instead of the checkerboard pattern. (seems like it should be easy)
2. When the inner image is dragged around, I don't want any portion of that image to display outside the bounded region. Outside the bounded region I just want my IMAGE 1 (the canvas image) to display. Inside the bounded region I want my draggable IMAGE 2 to display.

It doesn't seem like a huge stretch to achieve these 2 things; could you point me in the right direction of how to do it within your framework? Thanks in advance.

[fengyuanchen]

I‘m sorry, I have no idea about this. Feel free to fork one and try to implement it by yourself.