Search code examples
nativescriptnativescript-plugin

How to display image taken from camera plus plugin right below the screen

I'm trying to display image taken from camera plus plugin right below the screen.

For that I'm trying the event named 'photo Captured Event' and realized that the event itself was not triggered. I just put an alert message inside it and confirmed that it is not working. Sample snippet is below, for full workaround, go to this link https://play.nativescript.org/?template=play-js&id=nvIlTl&v=3

CameraPlus.on(nativescript_camera_plus.CameraPlus.photoCapturedEvent, args => {
    fromAsset(args.data).then(result => {
      pic.src = result;
      alert(result);
    });
  });

<GridLayout rows="*,auto" class="home-panel">
        <Cam:CameraPlus row="0" id="camPlus" saveToGallery="true"
            showCaptureIcon="true" showGalleryIcon="true" showToggleIcon="true"
            showFlashIcon="true" debug="true">
        </Cam:CameraPlus>

        <Image row="1" height="150" id="img_taken_id" src="{{ img_taken }}" />
</GridLayout>

First, I need to know why the alert message was not coming? Secondly, I need to display image taken without storing in local?

Important note: I'm trying this for 'android' not IOS

Solution

  • It's because you are not pointing to the right method. It should be,

    let ImageSourceModule = require('tns-core-modules/image-source');
.....
.....
ImageSourceModule.fromAsset(args.data).then(result => {
  pic.src = result;
  alert(result);
});