feat(image-source): add saveToFileAsync, toBase64StringAsync & resizeAsync (#9404)

apps/toolbox/src/main-page.xml

@@ -12,6 +12,7 @@
         <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
+        <Button text="image-async" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
       </StackLayout>
     </ScrollView>
   </StackLayout>

apps/toolbox/src/pages/image-async.ts

@@ -0,0 +1,35 @@
+import { Page, ImageSource, Observable, EventData, knownFolders, path } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SampleData();
+}
+
+export class SampleData extends Observable {
+	src: string = 'https://source.unsplash.com/random';
+	savedData: string = '';
+	resizedImage: ImageSource;
+	async save() {
+		try {
+			const imageSource = await ImageSource.fromUrl(this.src);
+			const tempFile = path.join(knownFolders.temp().path, `${Date.now()}.jpg`);
+			const base64 = imageSource.toBase64StringAsync('jpg');
+			const image = imageSource.saveToFileAsync(tempFile, 'jpg');
+			const resizedImage = imageSource.resizeAsync(50);
+			const results = await Promise.all([image, base64, resizedImage]);
+			const saved = results[0];
+			const base64Result = results[1];
+			if (saved) {
+				this.set('savedData', tempFile);
+				console.log('ImageAsset saved', saved, tempFile);
+			}
+			console.log('base64', base64Result);
+			console.log(results[2].width, results[2].height);
+			this.set('resizedImage', results[2]);
+		} catch (e) {
+			console.log('Failed to save ImageAsset');
+		}
+	}
+}

apps/toolbox/src/pages/image-async.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+
+    <GridLayout padding="20">   
+      <ScrollView>
+          <StackLayout>
+            <Button text="Image Async?" tap="{{save}}" />
+            <Image width="200" height="200" src="{{ src }}"/>
+            <Image marginTop="10" width="200" height="200" src="{{ savedData }}" />
+            <Image marginTop="10" width="50" height="50"  imageSource="{{ resizedImage }}" />
+          </StackLayout>
+      </ScrollView>
+    </GridLayout>
+</Page>