使用Phonegap在iOS上的相机​​预览上叠加图像 [英] Overlaying an image on camera preview on iOS using Phonegap

问题描述

我想要创建一个应用程序，其中半透明图像叠加在相机预览上。我知道他们不支持这个在原​​生Phonegap相机api。我想知道，如果有任何人谁有写一些Phonegap插件的经验可以给我任何建议，是否这将是可能的插件。我想我已经看到这种技术可能通过本机代码，所以在我看来，可能会写一个PhoneGap插件来访问这个功能，我只是没有任何经验Phonegap插件。

I am looking to create an app in which a semi transparent image is overlaid on the camera preview. I know their is no support for this in the native Phonegap camera api. I'm wondering if anyone who has some experience with writing Phonegap plugins can give me any advice on whether this would be possible with a plugin. I think I have seen that this technique is possible through native code so it seems to me that it would be possible to write a Phonegap plugin to access this functionality, I just don't have any experience with Phonegap plugins.

推荐答案

我知道，这有点太晚了，但有一种方法（仅限iPad）。您可以使用标准的 org.apache.cordova.camera -Plugin。

I know, it's a little bit too late but there is a way (iPad only). You can use the standard org.apache.cordova.camera-Plugin. But you have to tweak it a bit

第一个子分段 CDVCameraPicker ，所以您可以通过cordova-api切换覆盖：

First subclasse the CDVCameraPicker so you can toggle the overlay via cordova-api:

CDVCameraPicker + Overlay.h：

CDVCameraPicker+Overlay.h:

#import "CDVCamera.h"

@interface CDVCameraPicker (Overlay)
@property (nonatomic, strong) id showOverlay;
@end

CDVCameraPicker + Overlay.m：

CDVCameraPicker+Overlay.m:

#import "CDVCameraPicker+Overlay.h"
#import <objc/runtime.h>

static void *overlayKey;

@implementation CDVCameraPicker (Overlay)
@dynamic showOverlay;

- (void) setShowOverlay:(id)showOverlay {
    objc_setAssociatedObject(self, overlayKey, showOverlay, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (id) showOverlay {
    return objc_getAssociatedObject(self, overlayKey);
}
@end

然后将这些行添加到CDVCamera.m右后检查ImagePickerSourceType（行132）

Then add these lines to the CDVCamera.m right after checking the ImagePickerSourceType (Line 132)

    if ([cameraPicker.showOverlay intValue] == 1) {
        UIImageView *overlay = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 768, 1024)];
        overlay.contentMode = UIViewContentModeScaleAspectFill;
        overlay.image = [UIImage imageNamed:@"overlay.png"];
    }

不要忘记在CDVCamera.m $ b中导入您的子类CameraPicker $ b #importCDVCameraPicker + Overlay.h

Don't forget to import your subclassed CameraPicker in the CDVCamera.m #import "CDVCameraPicker+Overlay.h"

无需编辑 Camera.js -File
在其他选项之下添加此行

No you have to edit the Camera.js-File Add this line underneath the other options

var showOverlay = getValue(options.showOverlay, false);

然后将 var 添加到 args - 在最后一个索引处。就是这样。现在您可以切换叠加层，例如：

Then add the var to the args-Array at last index. And that's it. Now you can toggle your overlay like this:

       navigator.camera.getPicture(onSuccess, onFail, { quality: 40,
                        destinationType: Camera.DestinationType.FILE_URI,
                        sourceType: Camera.PictureSourceType.CAMERA,
                        encodingType: Camera.EncodingType.JPEG,
                        correctOrientation: true,
                        saveToPhotoAlbum: true,
                        showOverlay: false
                    }); 

这篇关于使用Phonegap在iOS上的相机​​预览上叠加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！