仅显示图像的一半或使用Javascript和HTML对角裁剪

Question

我想用Javascript在phonegap中构建一个移动工具，向人们展示他们的淋浴标记会是什么样子。用户应使用相机拍照以在应用中显示。要了解我在说什么，请看一下：

这3张图片应该放在一起。如果我使用透明背景的合适图像，它的工作完美。问题是，如果我用设备的相机拍照，那将是一张方形图片。

所以它看起来像这样：

我的图片HTML代码：

<div id="Images">

   <div id="wand"><img id="imageTop" src="images/top.png"> </div>
   <div id="boden"><img id="imageMid" src="images/mid.png"> </div>
   <div id="rinne"><img id="imageBottom" src="images/bottom.png"> </div>
 </div>

在我的js代码中，我只是将新图像设置为例如imageTop的src：

   var image = document.getElementById('imageTop');
   image.src = "data:image/jpeg;base64," + imageData;

现在我当然可以将图像2和3的z-index设置为低于1.图像，因此imageTop的拍摄图片将起作用，因为它在后台。问题是，对于图像1和图像2，应该可以拍摄2张图片，所以我的应用程序中有两个新的“半”图像。只是图像3保持不变。我可以使用javascript对角裁剪图像或使其透明，以便适合吗？

我希望你理解我的问题。请帮帮我，我不知道我怎么能这样做：/