javascript - 如何对一些 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 中有一些实用程序，您可以使用它们来裁剪图像。