Question

I need to make a redactor where the user can put one image over another is that possible?

Fore example if we have a T-shirt of white color, and we have another image of flowers and when we drag a flowers image and drop it on the T-shirt, then the T-shirt have a drawed flowers of the previous image, and the result is a T-shirt with the picture of flowers, what can i use to do that faster?, i think i will need Javascript(drag and drop) to drag the image that i want it to be in the other image, in other words i want to combine 2 images, but the second get cropped when it droped on the first image, i hope you understand what i am trying to say

Answer 1

You could use this simple HTML:

<div style="background-color: white;position:absolute;">
  <img id="flowers" style="position:absolute;" src="empty.png"> // Empty image
  <img style="position:absolute;" src="mask1.png"> // A transparent T-shirt pattern surrounded with non-transparent background color (in this case white)
  <img style="position:absolute;" src="mask2.png"> // 20-50% transparent pattern for shadows in T-shirt
</div>

The masking images can also be combined by using layers when creating the image. The trick here is that only the T-shirt-pattern within the image is transparent, and shadows which make the T-shirt “alive” are only partly transparent.

And when you’ll finish your drag&drop:

document.getElementById('flowers').src='your_path_to_flowers.png';

This is rather an old-fashion way, but it works in older browsers too. I think there are utilites in HTML5/CSS3, with which you can crop images with an other.