2

我想用 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对角裁剪图像或使其透明，这样它就适合了吗？

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

4

0 回答 0