I have built an e-commerce website. There is a product customization feature. Just like on the sample image.
I need to implement the preview feature that is seen on the sample image. While a customer designs his own coaster it should be updated on the preview mockups. Then it should be enlarged with a click maybe for a closer look. Finally, one of the mockups should be added to the order details mail which will be sent to the customer. (order mails handled by Php backend of the ecommerce site which is a wordpress woocommerce.)
I guess this can be done with some css(filters etc.) layering the images and cloning the design area div with javascript on top of the image.
But the problem starts with email scenario. If I just create a simple preview field on screen then how can I add this fake mockup image(created with css filters etc.)
A while ago I have read some posts on stackoverflow and people were talking about server side image generation and some unix things that even dont know what they are. Now I could not find the links to those posts.
So what can be the optimal approach to this scenario for the least server resource need? Sample image is from here: https://www.zazzle.com/pd/spp/pt-giftstone_coaster?stonetype=turkishtravertine
