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

Question

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

到目前为止,我已经找到了一个带有正常运行的iOS源代码的插件(okstate-plugin-camera-overlay,可在Github上使用),以及一个可能适用于Android的解决方案.

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

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

更新

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

更新2

我正在成功使用Weston Granger修改过的插件版本,它没有困扰原始版本的问题.它适用于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 -->