Javascript 定制产品照片

所以我在做一个客户提供定制交易卡的项目。我遇到的问题是能够以一种允许用户上传出现在特定框中的照片的方式覆盖卡片模板

我尝试过iframe方法，我尝试过使用2个div和使用z-index进行覆盖，我购买了2个产品定制选项，但都没有实现我想要做的

以下是我需要的一个非常基本的图像：

---

仅举一个简单代码的例子

现在，如果您能发布完整的代码，我们可以进一步帮助您

<div class="one">
Template area
</div>
<div class="two">
Template area
</div>
<div class="three">
Template area
</div>

CSS:
.one{
  position:relative
  width:100%;
  height:100px;
  background:url('http://pokit.org/get/img/20c0eb36b19b3006b310f5834a9f818f.jpg') NO-REPEAT;
}

.two{
  width:250px;
  height:50px;
  background-color:blue;
  position:absolute;

}
.three{
  margin-top:20px;
  position:relative;
  width:100%;
  height:100px;
  background:url('http://pokit.org/get/img/b90d68274639145e23102320e602afaa.jpg') no-repeat;
}

模板区
模板区
模板区
CSS:
.一{
职位：相对
宽度：100%；
高度：100px；
背景：url（'http://pokit.org/get/img/20c0eb36b19b3006b310f5834a9f818f.jpg’）不重复；
}
.二{
宽度：250px；
高度：50px；
背景颜色：蓝色；
位置：绝对位置；
}
.三{
边缘顶部：20px；
位置：相对位置；
宽度：100%；
高度：100px；
背景：url（'http://pokit.org/get/img/b90d68274639145e23102320e602afaa.jpg")不重复;；
}

将图像应用为背景图像。你试过了吗？发布你的代码到目前为止我一直在考虑这样做，但我需要在用户编辑/裁剪/移动照片时更新图像区域。@LGSon现在我基本上在地面上。从字面上说，我只是有容器来容纳这部分的网站。我以前尝试过的所有东西都被我抹掉了，因为它没有按预期的方式运行。@AndroidDev-如果你问一个实际的问题，肯定会有帮助。当然，您可能会认为您的确切查询是明确和明显的，而新成员的情况通常不是这样。此外，如果你明确说明为什么其他方法不好，它将帮助那些试图帮助你的人。如果没有这一点，怎么能阻止某人投入工作和精力，只是为了建议一种你认为不值得的方法，却没有在创建/发布它之前给他们足够的信息让他们自己工作？