Question

我正在编写和应用程序，需要在相机上显示透明图像，例如作为构图的指南。该应用必须至少在iOS和Android上发布。

到目前为止，我找到了一个带有正常运行的iOS源代码的插件（okstate-plugin-camera-overlay，available on Github）和一个possibly working solution for Android。

这些都不令人满意，无论是编译还是运行都有大量的警告和怪癖。我想我想要计划一个具有此功能的新插件以及干净且最小化的实现。

我在哪里可以找到创建支持两个平台的精益插件的方向，以及在两个平台上以最少侵入性的方式装饰相机功能的方法？

更新

看到评论：我在cordoba-plugin-camera中做了一个分叉，让它适用于iOS。现在我需要在Android中通过相机创建透明覆盖的方向。

更新2

我正在成功使用version of the plugin that Weston Granger has modified，它没有困扰原始版本的问题。它适用于iOS和Android，同样顺畅。

这是我正在使用的代码

我正在使用Weston Granger已修改的插件版本

这是代码的相关部分。它会在图像后面显示相机。

CameraPreview.startCamera({
    x: 0,
    y: 0,
    width: screen.width,
    height: screen.height,
    camera: "back",
    tapPhoto: true,
    previewDrag: false,
    toBack: true
});
CameraPreview.setOnPictureTakenHandler(function (picture) {
    savePicture(picture);
    CameraPreview.hide();
    CameraPreview.stopCamera();
    history.back();
});
$("#clickButton").click(takePicture);
$("#switchCamera").click(CameraPreview.switchCamera);
$("#exitButton").click(function () {
    CameraPreview.hide();
    CameraPreview.stopCamera();
    history.back();
});

关于图像的html模板，它只是一个透明体和图像的页面。如果要查看相机预览，图像应该具有透明区域。我也显示了按钮，但这是你应该根据自己的需要定制的代码。

<!-- camera.html -->
<style>
    body {
        background-color: transparent;
        background-image: none;
    }

    div.cameraButtons {
        position: fixed;
        text-align: center;
        background-color: black;
        bottom: 0px;
        width: 100%;
    }
</style>

<div class="cameraContainer">
    <img align="center" src="assets/{{frame_image}}" />
</div>

<div class="cameraButtons">
    <a id="switchCamera" style="float: right; margin-right: 8px">
        <i class="material-icons md-48" >camera_rear</i>
    </a>

    <a id="clicButton" >
        <i class="material-icons md-48" >photo_camera</i>
    </a>

    <a id="exitButton" style="float: left;">
        <i class="material-icons md-48" >backspace</i>
    </a>
</div>
<!-- /camera.html -->

规划带有透明叠加图像的cordova相机插件

更新

更新2

0 个答案: