title: Nativescript image thumbnails
body: <p>I'm using Angular 8.0 + NativeScript 6.0 with the NativeScript camera plugin to take pictures and store them in the gallery in my app. When I do a listing of the images I've taken in the app it's loading the full scale image which slows down the whole app.</p>
  
  <p>Is there a way I can get the thumbnail of the gallery image instead of the full image?</p>
  
  <p>Currently I save the URL of the full image in my database by storing it in a string called receipt_url and passing that to the backend. Here is the code where I take the picture and store the URL;</p>
  
  <pre><code>onTakeReceiptTap(args) {
      requestPermissions().then(
          () =&gt; {
              takePicture({width: 640, height: 480, keepAspectRatio: true})
                  .then((imageAsset: any) =&gt; {
                      this.receiptImage = imageAsset;
  
                      console.log("Taken receipt")
                      let that = this;
  
                      if (imageAsset.android) {
                          this._dataItem.receipt_url = imageAsset.android;
                      } else if (imageAsset.ios) {
                          this._dataItem.receipt_url = imageAsset.ios;
                      }
  
                  }, (error) =&gt; {
                      console.log("Error: " + error);
                  });
          },
          () =&gt; alert('permissions rejected')
      );
  } // onTakeReceiptTap
  </code></pre>
  
  <p>When performing a listing I simply get all the records from the database which includes the receipt url and I display the picture like so;</p>
  
  <pre><code>        &lt;Image rowspan="2" col="1" [src]="item.receipt_url" stretch="aspectFit"&gt;&lt;/Image&gt;
  </code></pre>
  
  <p>Given all I have is a URL I'm wondering if Android/iOS create a thumbnail in which I could get the URL and store that as well and use it in my listing or do I have to create the thumbnail myself somehow and either send the thumbnail from the backend or save the URL for the thumbnail?</p>
  
  <p><strong>Update: Virtual Scrolling</strong></p>
  
  <p>I tried adding the virtual scrolling like so and tried different heights (150, 500 &amp; 1000) all of which are still very slow and jerky to scroll.</p>
  
  <pre><code>  &lt;GridLayout row="1" columns="*, auto"&gt;
      &lt;RadListView [items]="dataItems"
                   [filteringFunction]="filterItems"
                   pullToRefresh="true"
                   (pullToRefreshInitiated)="onPullToRefreshInitiated($event)"&gt;
  
        &lt;ScrollView height="500"&gt;
          &lt;ng-template tkListItemTemplate let-item="item"&gt;
            &lt;StackLayout orientation="vertical"&gt;
              &lt;GridLayout class="itemContainer" rows="50,*" columns="*,100"&gt;
  
                &lt;!-- Currently these images are full size and slowing down the listing --&gt;
                &lt;Image rowspan="2" col="1" [src]="item.picture_url" stretch="aspectFit"&gt;&lt;/Image&gt;
  
                &lt;Label row="0" col="0" class="nameLabel" [text]="item.name"&gt;&lt;/Label&gt;
  
              &lt;/GridLayout&gt;
  
              &lt;!-- &lt;StackLayout orientation="horizontal"&gt;
                   &lt;Label text="Price: "&gt;&lt;/Label&gt;
                   &lt;Label class="gross_centsLabel" [text]="item.gross_cents"&gt;&lt;/Label&gt;
                   &lt;/StackLayout&gt; --&gt;
            &lt;/StackLayout&gt;
          &lt;/ng-template&gt;
        &lt;/ScrollView&gt;
  
      &lt;/RadListView&gt;
    &lt;/GridLayout&gt;
  </code></pre>
  
  <p><strong>Update: using ImageSource</strong></p>
  
  <p>If I try using ImageSource for each image in the list then I get the following error;</p>
  
  <pre><code>LOG from device Galaxy S8: ERROR Error: java.lang.OutOfMemoryError: Failed to allocate a 36578316 byte allocation with 16269904 free bytes and 15MB until OOM
  </code></pre>
  
  <p>Here is how I was setting the ImageSources;</p>
  
  <pre><code>loadData() {
      this._dataItemService.listing()
          .subscribe(loadedItems =&gt; {
              loadedItems.forEach((itemObject) =&gt; {
                  itemObject.picture = fromFile(itemObject.picture_url);
                  this._dataItems.unshift(itemObject) ;
              });
          })
  }
  </code></pre>
  
  <p>The 'picture' attribute is setup as a ImageSource in the data model.</p>
  
  <p><strong>Update: Saving thumbnails</strong></p>
  
  <p>I managed to save a thumbnail on the frontend and display this in my listing. Now the listing is much faster.</p>
  
  <pre><code>                    const source = new ImageSource();
                      source.fromAsset(imageAsset)
                          .then((imageSource: ImageSource) =&gt; {
                              const folderPath = knownFolders.documents().path;
                              const fileName = "test.jpg";
                              const filePath = path.join(folderPath, fileName);
                              const saved: boolean = imageSource.saveToFile(filePath, "jpg");
                              if (saved) {
                                  console.log("Gallery: " + this._dataItem.picture_url);
                                  console.log("Saved: " + filePath);
                                  console.log("Image saved successfully!");
                              }
                          });
  </code></pre>