What is the best way to implement a print designer on cases?

Question

JavaScript

In general, the task is to write a "constructor" for prints. The bottom line is simple - there are blanks for phone cases in png format (suppose where there are cutouts for cameras, etc., it's transparent there). Further like this:

1. We go to the site
   
2. Choose a phone model
   
3. Upload your image, which should be equal to the ideal number of n * m pixels for each model (it seems to me that the "cropping" functionality will not be so easy to add there)
   
4. The script "pulls" it onto the layout (the transparent places of the layout also become transparent on the loaded image)
   
5. If approved, an image is sent (without overlaying transparency, etc. (the original one uploaded by the user) to my mail
   

What is the best way to implement points 3 and 4 so that the server does not clutter up and works everywhere to the maximum? Are there ready-made such scripts on the net?
I plan to use laravel for the admin part, maybe there are some packages that will make life easier when developing such a solution.

Answer 1

I used masks in css. I created 2 images of each layout, where 1 of them is a mask, and the second one is superimposed on top of the first one (position: absolute), which has shadows and highlights. I used jquery to load the image. The uploaded image was placed under 1 layer (where there was a mask (case shape)). As a result, a ready-made layout for the user was obtained. This is the minimum set for your implementation.
After submitting the form, we do the same in PHP. We take the uploaded image, apply a mask image on it, after which a picture with shadows and highlights was added to this finished image - this image served for storage in orders, and since I could rotate, resize the image and shift it, then for execution of the order such as the user made it.