iOS unable to get requested image resolution, always getting smaller

[Daxito]

I am not sure what I am doing wrong or maybe this is a bug.
I want to take a picture 2048x1536 but I keep getting an image 320x480.
Please see the attached demo that shows the issue.
I am using an iPhone 4.

CameraTest.zip

[tsonevn]

Hi @Daxito,
Thank you for the sample project.

I reviewed your case and found that the image, which has been made has been saved to the gallery and returned in the app with the correct size.

However, the problem comes from the ImageSource, which has been returned from fromAsset method, which will always be with the minimal possible size of the UIImage.

We will research this behavior and will provide further info about the problem and what is causing it.

Regards,
@tsonevn

[Daxito]

Thank you @tsonevn !

[tsonevn]

Hi @Daxito
In my further research, I found that you could use PHImageManager in iOS to get the UIImage with the correct width and height. I am attaching sample code, where have been used PHImageManager and its requestImageForAsset method.

TypeScript

import { Page } from "ui/page";
import { View } from 'ui/core/view';
import { takePicture, requestPermissions } from "nativescript-camera";
import * as appModule from "application";
import * as imageSourceModule from "image-source";
import {Image} from "ui/image"
import {ImageAsset, ImageAssetOptions} from "image-asset"
import {isIOS} from "platform"

declare var UIImage:any;
declare var PHImageManager:any;
declare var PHImageRequestOptions:any;
declare var targetSize:any;
declare var CGSize:any;
declare var PHImageManager:any;
declare var contentMode:any;
declare var PHImageContentModeAspectFill:any;
declare var PHImageRequestOptionsResizeMode, PHImageRequestOptionsDeliveryModeHighQualityFormat;
declare var Environment:any;

declare var java:any;
declare var android:any;

import * as trace from "trace";
trace.addCategories(trace.categories.Debug);
trace.enable();


export function navigatingTo(args: EventData) {
    var page = <Page>args.object;
    let picturePath = null;

    page.bindingContext = fromObject({cameraImage: picturePath, saveToGallery: true});
}

export function onRequestPermissionsTap(args: EventData) {
    requestPermissions();
}

export function onTakePictureTap(args: EventData) {
    let page = <Page>(<View>args.object).page;
    let saveToGallery = page.bindingContext.get("saveToGallery");
    takePicture({width: 2048, height: 1536, keepAspectRatio: false, saveToGallery: saveToGallery}).
        then((imageAsset) => {

            if(isIOS){
                try {

                let manager = PHImageManager.defaultManager()
                let options = new PHImageRequestOptions();
                options.resizeMode = PHImageRequestOptionsResizeMode.Exact;
                options.deliveryMode = PHImageRequestOptionsDeliveryModeHighQualityFormat;
                var img;
 
                manager.requestImageForAssetTargetSizeContentModeOptionsResultHandler(imageAsset.ios, { width: 2048, height: 1536 }, PHImageContentModeAspectFill, options, function(result, info) {
                    console.log("Result: " + result + ", info: " + info);
                    img=result;
                });
                
                console.log(img)

                } catch(e) {
                    console.log("err: " + e);
                    console.log("stack: " + e.stack);
                }
            }
   
        }, 
        (err) => {
            console.log("Error -> " + err.message);
        });
}

Regards,
@tsonevn

[Daxito]

@tsonevn Thank you for sharing! I'm taking a look at it right now.

[Daxito]

FYI: seems like Android has the same issue ;-), It makes sense if you said it might be a problem with the Image Source

[tsonevn]

Hi @Daxito,

I was able to reproduce this behavior also on Android. I am still searching for a workaround and will provide further info with possible solution Android.

[tsonevn]

Hi @Daxito,

To be able to create image with custom size on Android, you could create Bitmap with appropriate width and height. I am attaching sample with the workaround for this case:

import { EventData, Observable, fromObject } from "data/observable";
import { Page } from "ui/page";
import { View } from 'ui/core/view';
import { takePicture, requestPermissions } from "nativescript-camera";
import * as appModule from "application";
import * as imageSourceModule from "image-source";
import { Image } from "ui/image"
import { ImageAsset, ImageAssetOptions } from "image-asset"
import { isIOS, isAndroid } from "platform"
var application = require("application")

declare var java: any;
declare var android: any;

import * as trace from "trace";
trace.addCategories(trace.categories.Debug);
trace.enable();


export function navigatingTo(args: EventData) {
    var page = <Page>args.object;
    let picturePath = null;

    page.bindingContext = fromObject({ cameraImage: picturePath, saveToGallery: true });
}

export function onRequestPermissionsTap(args: EventData) {
    requestPermissions();
}

export function onTakePictureTap(args: EventData) {
    let page = <Page>(<View>args.object).page;
    let saveToGallery = page.bindingContext.get("saveToGallery");
    takePicture({ width: 2048, height: 1536, keepAspectRatio: false, saveToGallery: saveToGallery }).
        then((imageAsset) => {
            console.log("image asset android")
            console.log(imageAsset.android);

            if (isAndroid) {


                var downsampleOptions = new android.graphics.BitmapFactory.Options();
                downsampleOptions.inSampleSize = getSampleSize(imageAsset.android, { maxWidth: 2048, maxHeight: 1536 });
                var bitmap = android.graphics.BitmapFactory.decodeFile(imageAsset.android, downsampleOptions);
                console.log("bitmap");
                console.log(bitmap);
                console.log("bitmap getWidth");
                console.log(bitmap.getWidth());
                console.log("bitmap getHeight");
                console.log(bitmap.getHeight());
                page.bindingContext.set("cameraImage", bitmap);
            }
            
            
        },
        (err) => {
            console.log("Error -> " + err.message);
        });
}


function getSampleSize(uri, options?: { maxWidth: number, maxHeight: number }): number {
    var scale = 1;
    if (isAndroid) {
        var boundsOptions = new android.graphics.BitmapFactory.Options();
        boundsOptions.inJustDecodeBounds = true;
        android.graphics.BitmapFactory.decodeFile(uri, boundsOptions);

        // Find the correct scale value. It should be the power of 2.
        var outWidth = boundsOptions.outWidth;
        var outHeight = boundsOptions.outHeight;

        if (options) {

            var targetSize = options.maxWidth < options.maxHeight ? options.maxWidth : options.maxHeight;
            while (!(matchesSize(targetSize, outWidth) ||
                matchesSize(targetSize, outHeight))) {
                outWidth /= 2;
                outHeight /= 2;
                scale *= 2;
            }
        }
    }
    return scale;
}


function matchesSize(targetSize: number, actualSize: number): boolean {
    return targetSize && actualSize / 2 < targetSize;
}

Regards,
@tsonevn

[Daxito]

Thank you @tsonevn ! I already implemented the workaround for iOS!

Thanks

@tsonevn any idea how I can convert the final bitmap/asset object to base64 in both cases?

[nmongiya]

In my case, It is taking larger pictures than the size I provided. (In case of both android and ios.)