javascript - 画像の半分のみを表示するか、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 つの写真を撮ることができるため、アプリに 2 つの新しい「半分」の画像があることです。画像3だけはそのままです。画像をjavascriptで斜めにトリミングしたり、透明にしたりして、収まるようにすることはできますか?

私の問題を理解していただければ幸いです。どうすればこれができるのかわからないので、助けてください:/