Merge pull request #118 from NativeScript/radeva/fix-aspect-ratio

(feat): Add option for iOS image aspect ratio. Default is `fill`.

Author: radeva

README.md

@@ -122,6 +122,16 @@ context
 | albums | null | Albums from where the images are picked. |
 
 
+### Image properties
+
+Once image is picked some options can be applied to it  before it is used:
+
+| Option | Default | Description |
+| --- | --- | --- |
+| maxWidth | null | Image max width |
+| maxHeight | null | Image max height |
+| aspectRatio | fit | iOS only. Possible values are `fit` and `fill`. [Read more](https://developer.apple.com/documentation/photos/phimagecontentmode) |
+
 ## License
 
 2015, Telerik AD

demo/app/main-page.ts

@@ -4,23 +4,25 @@ import { isAndroid } from "tns-core-modules/platform";
 import * as imagepicker from "nativescript-imagepicker";
 
 let list;
+let imageSrc;
 
 export function pageLoaded(args: EventData) {
     let page = <Page>args.object;
     list = page.getViewById("urls-list");
+    imageSrc = page.getViewById("imageSrc");
 }
 
 export function onSelectMultipleTap(args) {
     let context = imagepicker.create({ mode: "multiple" });
-    startSelection(context);
+    startSelection(context, false);
 }
 
 export function onSelectSingleTap(args) {
     let context = imagepicker.create({ mode: "single" });
-    startSelection(context);
+    startSelection(context, true);
 }
 
-function startSelection(context) {
+function startSelection(context, isSingle) {
     context
         .authorize()
         .then(function() {
@@ -32,6 +34,14 @@ function startSelection(context) {
             selection.forEach(function(selected) {
                 console.log("----------------");
                 console.log("uri: " + selected.uri);
+                if (isSingle) {
+                    selected.getImage({ maxWidth: 200, maxHeight: 200, aspectRatio: 'fill' })
+                    .then((imageSource) => {
+                        imageSrc.src = imageSource;
+                    });
+                } else {
+                    imageSrc.visibility = 'hidden';
+                }
             });
             list.items = selection;
         }).catch(function (e) {

demo/app/main-page.xml

@@ -12,6 +12,8 @@
                 </GridLayout>
             </ListView.itemTemplate>
         </ListView>
+
+        <Image id="imageSrc" width="200" height="200" />
         <Button row="1" text="Pick Single" tap="onSelectSingleTap" horizontalAlignment="center" />
         <Button row="2" text="Pick Multiple" tap="onSelectMultipleTap" horizontalAlignment="center" />
     </GridLayout>

src/imagepicker.ios.ts

@@ -19,6 +19,7 @@ const IMAGE_HEIGHT = 80;
 interface ImageOptions {
     maxWidth?: number;
     maxHeight?: number;
+    aspectRatio?: "fill" | "fit";
 }
 
 export function create(options?): ImagePicker {
@@ -344,6 +345,7 @@ class ImagePickerPH extends ImagePicker {
         return new Promise<image_source.ImageSource>((resolve, reject) => {
             let size: CGSize = options ? CGSizeMake(options.maxWidth, options.maxHeight) : PHImageManagerMaximumSize;
             let resizeMode = PHImageRequestOptions.alloc().init();
+            let aspectRatio = (options && options.aspectRatio && options.aspectRatio === 'fill') ? PHImageContentMode.AspectFill : PHImageContentMode.AspectFit;
 
             // TODO: Decide whether it is benefical to use PHImageRequestOptionsResizeModeFast
             //       Accuracy vs Performance. It is probably best to expose these as iOS specific options.
@@ -357,7 +359,7 @@ class ImagePickerPH extends ImagePicker {
             PHImageManager.defaultManager().requestImageForAssetTargetSizeContentModeOptionsResultHandler(
                 image,
                 size,
-                PHImageContentMode.AspectFit, // Scales the image so that its larger dimension fits the target size
+                aspectRatio,
                 resizeMode,
                 (createdImage, data) => {
                     if (createdImage) {

src/index.d.ts

@@ -12,6 +12,11 @@ export interface ImageOptions {
      * The maximum height that the image is allowed to be.
      */
     maxHeight?: number;
+
+    /**
+     * iOS only. The image aspect ratio. Default value: fit.
+     */
+    aspectRatio?: "fill" | "fit";
 }
 
 export class SelectedAsset extends imageAssetModule.ImageAsset {

src/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nativescript-imagepicker",
-    "version": "3.0.7",
+    "version": "4.0.0",
     "description": "A plugin for the NativeScript framework implementing multiple image picker",
     "repository": {
         "type": "git",