How-to Call a Service Using Http Post, Display Image Returned As A Blob

The Idea

We send an image that is publicly available at a URL to a web service that generates a thumbnail and sends it back as a Blob. Angular will read that Blob and convert that to an image and display it.

What we need

1. Image at a public url
2. Access to a web service that we can generate a thumbnail of an image and return it

Settings

Note

This example uses Microsft Cognitive Services' Computer Vision API . Please create a new account there. It's $0 if you have Azure Account.

After subscribing to the Computer Vision and added, the keys can retrieved from Azure as below:

Http POST Web service URL

• The service URL https://southcentralus.api.cognitive.microsoft.com/vision/v2.0/generateThumbnail?width=100&height=100&smartCropp can also be tested at Microsoft Cognitive Services Computer Vision API page

Adding keys to access the web service

• Go to this file /src/app/services/blob.service.ts, change the value for Ocp-Apim-Subscription-Key

Running the application

This project was generated with Angular CLI version 1.6.8.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Output / Display

If the application builds and runs successfully, you should see an output as below:

Git thumbnail above is fetched from the service. The actual full sized image is here