在iOS上使用Phonegap叠加图像在相机预览上

Question

我希望创建一个应用程序，其中半透明图像叠加在相机预览上。我知道本地Phonegap相机API不支持此功能。我想知道是否有人有编写Phonegap插件的经验，能否就此向我提供任何建议。我认为我已经看到过通过本地代码实现此技术，因此我认为可以编写一个Phonegap插件来访问此功能，只是我没有编写过Phonegap插件的经验。

- tmartineau

---

我正在寻找同样的东西...你有找到过吗？ - Harry

这并不完全回答问题，但值得一看：http://libresoft.es/node/146。源代码在底部可用，并基于phonegap。 - hitautodestruct

Answer 1

我知道有点晚了，但还是有一种方法（仅适用于iPad）。您可以使用标准的org.apache.cordova.camera插件。但您需要进行一些调整。

首先，子类化CDVCameraPicker，以便您可以通过cordova-api切换覆盖层：

CDVCameraPicker+Overlay.h：

#import "CDVCamera.h"

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

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

在检查 ImagePickerSourceType（第 132 行）后，请将以下行添加到 CDVCamera.m 中：

    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 中导入你的子类 CameraPicker： #import "CDVCameraPicker+Overlay.h" 现在，您需要编辑 Camera.js 文件，在其他选项下添加以下行：

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

然后将var添加到args数组的最后一个索引。就这样，现在你可以像这样切换你的覆盖层：

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

- matthisb

---

这是一个有点老的内容，来自一个早已完成的项目（或者是被放弃了，我记不清了），但我想花时间感谢你提供的深入回答。也许将来我还会需要它，我相信它一定会派上用场！ - tmartineau

@tmartineau 我尝试了这个方法，但是没有成功。你知道这个方法在最新版本的Cordova中是否仍然有效吗？我唯一能让覆盖图像出现的方法是在CDVCamera.m文件的第685行左右的 if (cameraPicker.sourceType == UIImagePickerControllerSourceTypeCamera) 代码块中。我使用以下代码：UIImageView *overlayImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myImage"]]; overlayImage.frame = CGRectMake(0, 0, 768, 1024); cameraPicker.cameraOverlayView = overlayImage; 问题是它需要10秒钟才能加载或者根本不加载。 - Paul

@tmartineau 如果您有示例项目，我很想看看。 - Paul

@paul，我从未尝试过这个。正如我在评论中所说，原始问题已经是多年前的事情了，而且是来自一个已经死亡的项目。matthisb可能能够给你一些见解，因为这是他的答案。很抱歉我现在无法提供更多帮助。 - tmartineau

@tmartineau 对不起，我本来是想回复 matthisb 的。不过我已经自己解决了问题。我会把代码在这里发布作为回答。 - Paul

Answer 2

我尝试了被采纳的答案，但是很遗憾对我不起作用。

相反，我找到了一个更简单的解决方案，在 CDVCamera.m 文件中:

  + (instancetype) createFromPictureOptions(CDVPictureOptions*)pictureOptions;{

      CDVCameraPicker* cameraPicker = [[CDVCameraPicker alloc] init];
      cameraPicker.pictureOptions = pictureOptions;
      cameraPicker.sourceType = pictureOptions.sourceType;
      cameraPicker.allowsEditing = pictureOptions.allowsEditing;

if (cameraPicker.sourceType == UIImagePickerControllerSourceTypeCamera) {
    // More code...

         // Here is where you place your overlay.
         dispatch_async(dispatch_get_main_queue(), ^{
            UIImageView *overlayImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myImage.png"]];
            overlayImage.frame = CGRectMake(0, 0, 768, 1024);
            [cameraPicker.cameraOverlayView addSubview:overlayImage];
            [cameraPicker setCameraOverlayView:overlayImage];
     });

   //  Code left out for brevity
   }
}

使用Grand Central Dispatch执行叠加是非常重要的，特别是在涉及到IT技术方面的内容时。

- Paul