Quickstart: Get image insights using the Bing Visual Search REST API and Node.js

Article
05/22/2020

Warning

On October 30, 2020, the Bing Search APIs moved from Azure AI services to Bing Search Services. This documentation is provided for reference only. For updated documentation, see the Bing search API documentation. For instructions on creating new Azure resources for Bing search, see Create a Bing Search resource through the Azure Marketplace.

Use this quickstart to make your first call to the Bing Visual Search API. This simple JavaScript application uploads an image to the API, and displays the information returned about it. Although this application is written in JavaScript, the API is a RESTful Web service compatible with most programming languages.

Prerequisites

Node.js
The Request module for JavaScript. You can use npm install request command to install the module.
The form-data module. You can use the npm install form-data command to install the module.

Create an Azure resource

Start using the Bing Visual Search API by creating one of the following Azure resources:

Bing Search v7 resource

Available through the Azure portal until you delete the resource.
Select the S9 pricing tier.

Multi-service resource

Available through the Azure portal until you delete the resource.
Use the same key and endpoint for your applications, across multiple Azure AI services.

Initialize the application

Create a JavaScript file in your favorite IDE or editor, and set the following requirements:

var request = require('request');
var FormData = require('form-data');
var fs = require('fs');

Create variables for your API endpoint, subscription key, and the path to your image. For the baseUri value, you can use the global endpoint in the following code, or use the custom subdomain endpoint displayed in the Azure portal for your resource.
```
var baseUri = 'https://api.cognitive.microsoft.com/bing/v7.0/images/visualsearch';
var subscriptionKey = 'your-api-key';
var imagePath = "path-to-your-image";
```

Create a function named requestCallback() to print the response from the API.

function requestCallback(err, res, body) {
    console.log(JSON.stringify(JSON.parse(body), null, '  '))
}

Construct and send the search request

When you upload a local image, the form data must include the Content-Disposition header. Set its name parameter to "image", and set the filename parameter to the file name of your image. The contents of the form include the binary data of the image. The maximum image size you can upload is 1 MB.
```
--boundary_1234-abcd
Content-Disposition: form-data; name="image"; filename="myimagefile.jpg"

ÿØÿà JFIF ÖÆ68g-¤CWŸþ29ÌÄøÖ‘º«™æ±èuZiÀ)"óÓß°Î= ØJ9á+*G¦...

--boundary_1234-abcd--
```
Create a new FormData object with FormData(), and append your image path to it by using fs.createReadStream().
```
var form = new FormData();
form.append("image", fs.createReadStream(imagePath));
```

Use the request library to upload the image, and call requestCallback() to print the response. Add your subscription key to the request header.

form.getLength(function(err, length){
  if (err) {
    return requestCallback(err);
  }
  var r = request.post(baseUri, requestCallback);
  r._form = form; 
  r.setHeader('Ocp-Apim-Subscription-Key', subscriptionKey);
});

Next steps

Build a Visual Search single-page web app