Overlay image on camera preview on iOS using Phonegap

Question

I am looking to create an application in which a translucent image is superimposed on a camera preview. I know that they do not support this in their own Phonegap api phone. I am wondering if anyone with experience writing Phonegap plugins can give me any advice on whether this is possible with the plugin. I think I saw that this method is possible using native code, so it seems to me that it would be possible to create a Phonegap plugin to access this function, I just have no experience with Phonegap plugins.

Answer 1

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

First, subclass CDVCameraPicker so that you can switch overlay via 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 

Then add these lines to CDVCamera.m immediately after checking 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"]; } 

Remember to import your subcategorized CameraPicker into CDVCamera.m #import "CDVCameraPicker+Overlay.h"

No, you need to edit Camera.js Add this line under other parameters

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

Then add var to args -Array to the last index. And so it is. Now you can switch your overlay as follows:

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

Answer 2

I tried the accepted answer, but unfortunately did not work for me.

Instead, I found a much simpler solution. In 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 } } 

It is important to overlay using Grand Central Dispatch.