Improve ImageAsset scaling (#5110)

* Do not depend on current device screen while calculating Image Asset size.

* Scale the image asset to the exact requested size.

* Process image assets natively, pass keepAspectRatio based on the stretch property and Asset options.

* Fixed the splashscreen resource name as it cannot be read when containing a dot.

* Updated the Image Asset scale and rotate logic based on the Native one.

* Make the ImageAsset size more important than the Image decode size as its more specific.

* Fixed tslint errors.

* Added filePath support in the ImageAsset constructor for iOS in order to unify it with the Android implementation, support for relative files and file not found support errors.

* Added unit tests for ImageAssets.

* Added a sample app for UI testing of image-view with ImageAsset src.

* chore: apply PR comments

apps/app/ui-tests-app/image-view/image-asset/image-asset.ts

@@ -0,0 +1,8 @@
+import * as vmModule from "./view-model";
+
+var viewModel = vmModule.imageViewModel;
+
+export function pageLoaded(args) {
+    let page = args.object;
+    page.bindingContext = viewModel;
+}

apps/app/ui-tests-app/image-view/image-asset/image-asset.xml

@@ -0,0 +1,6 @@
+<Page loaded="pageLoaded">
+      <GridLayout rows="*, *">
+        <Image row="0" src="{{ cameraImageAsset }}" stretch="aspectFill" margin="10"/>
+        <Image row="1" src="{{ cameraImageSrc }}" stretch="aspectFill" margin="10"></Image>
+    </GridLayout>
+</Page>

apps/app/ui-tests-app/image-view/image-asset/view-model.ts

@@ -0,0 +1,44 @@
+import * as dialogs from "tns-core-modules/ui/dialogs";
+import * as observable from "tns-core-modules/data/observable";
+import * as imageAssetModule from "tns-core-modules/image-asset";
+import { ImageSource } from 'tns-core-modules/image-source';
+
+let _cameraImageAsset = null;
+let _cameraImageSrc = null;
+
+export class ImageViewModel extends observable.Observable {
+
+    constructor() {
+        super();
+        let asset = new imageAssetModule.ImageAsset('~/splashscreen.png');
+        asset.options = {
+            width: 300,
+            height: 300,
+            keepAspectRatio: true
+        };
+        let source = new ImageSource();
+        source.fromAsset(asset).then((source) => {
+            this.set("cameraImageAsset", asset);
+            this.set("cameraImageSrc", source);
+        }, (error) => {
+            console.log(error);
+        });
+    }
+
+    get cameraImageAsset(): string {
+        return _cameraImageAsset;
+    }
+
+    set cameraImageAsset(value: string) {
+        _cameraImageAsset = value;
+    }
+
+    get cameraImageSrc(): string {
+        return _cameraImageSrc;
+    }
+
+    set cameraImageSrc(value: string) {
+        _cameraImageSrc = value;
+    }
+}
+export var imageViewModel = new ImageViewModel();

apps/app/ui-tests-app/image-view/main-page.ts

@@ -16,6 +16,7 @@ export function loadExamples() {
     examples.set("mode-matrix", "image-view/mode-matrix");
     examples.set("stretch-modes", "image-view/stretch-modes");
     examples.set("missing-image", "image-view/missing-image");
+    examples.set("image-asset", "image-view/image-asset/image-asset");
 
     return examples;
 }