Planning a cordova camera plugin with transparent overlay image

问题

I am writing and app which needs to show a transparent image over the camera, for example as a guide for composition. The app has to be shipped at least on iOS and Android.

So far, I have found a plugin with a functioning iOS source (okstate-plugin-camera-overlay, available on Github), and a possibly working solution for Android.

None of these is satisfying, both compile and run with a host of warnings and quirks. I think I want to plan a new plugin with this functionality and a clean and minimal implementation.

Where could I look for directions for creating a lean plugin supporting both platforms and for a way of decorating the camera functionality in the least intrusive way on both platforms?

update

see the comments: I make a fork in cordoba-plugin-camera and made it work for iOS. Now I need directions to create a transparent overlay over the camera in Android.

update 2

I am using successfully the version of the plugin that Weston Granger has modified, and it has none of the problems that plague the original version. It works for me on iOS and Android with equal smoothness.

This is the code I am using

I am using the version of the plugin that Weston Granger has modified

This is the relevant portion of code. It will show the camera behind an image.

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();
});

Regarding the html template for the image, it is just a page with transparent body and an image. The image should have transparent area, if you want to see through the camera preview. I have shown also the buttons, but this is code you should tailor to your needs.

<!-- 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 -->

来源：https://stackoverflow.com/questions/33762526/planning-a-cordova-camera-plugin-with-transparent-overlay-image

标签

android

ios

cordova

phonegap-plugins