如何在T恤上拼版(或组合两张图片)

Question

我需要做一个编辑程序，用户可以把一个图像放在另一个，这是可能的吗？

例如，如果我们有一件白色的T恤，我们有另一个花朵的图像，当我们拖动一个花朵图像并将其放在T恤上时，T恤具有前一个图像的绘制的花朵，结果是一个带有花朵图片的T恤，我想我需要使用Javascript(拖放)来拖动我希望它在另一个图像中的图像，换句话说，我想合并两个图像，但第二个图像在第一个图像上时被裁剪。我希望你能理解我想说的话

Answer 1

你可以使用这个简单的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>

在创建图像时，还可以通过使用层来组合遮罩图像。这里的诀窍是，只有图像中的T恤图案是透明的，而使T恤“活”的阴影只是部分透明的。

当你完成拖放的时候：

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

这是一种相当过时的方式，但它也适用于较旧的浏览器。我认为HTML5/CSS3中有一些实用程序，你可以用它来裁剪图像。