On my previous blog: Analyze Image in React.JS using Azure Computer Vision , I provided an introduction about Computer Vision and instructions on setting up the Azure Portal. Feel free to open the link and follow the step 1. The main idea of this blog is to integrate Azure Computer Vision to your Vue.JS.

2.1 npm i axios a promise-based HTTP Client for our application.

For this demo, I'm overwriting the App.vue file and we're using Composition API.

3.1 Import axios on your file.

3.2 Declare the keys inside the Vue javascript setup.

        const key = "_YOUR_ENDPOINT_KEY";
const endpoint = "_YOUR_AZURECOMPUTERSERVICE_ENDPOINT_/vision/v3.2/analyze?";
      

Note: Put your keys to a secure key storage like Azure Key Vault or use a backend server where you can put and hide the keys to an environment file.

3.3 Create a method that will analyze the image and that will call to our endpoint.

        const analyzeImage = () => {
  let data = new FormData();
  data.append("blob", image, "file.png");

  const params = new URLSearchParams({
    // "Categories,Description,Color",
    visualFeatures: "Tags",
  }).toString();

  const config = {
    headers: {
      "Content-Type": "multipart/form-data",
      "Ocp-Apim-Subscription-Key": key,
    },
  };

  axios.post(`${endpoint}${params}`, data, config).then((response) => {
    // response here
  }).catch((error) => {
    console.log(error);
  }).finally(() => {
    // do something after the request is finished
  });
};
      

We have other options for the visual feature that we can use like "Categories", "Description" and "Color"

What happens here is that we're attaching the blob image from input file to the FormData then send a request to the Azure Computer Vision endpoint. Azure Computer Vision does its magic with its powerful algorithm.

The Ocp-Apim-Subscription-Key is where we attach the key that we declared above.

3.4 Since we're using Tags as our Visual Feature, we can display our response to a friendly result so if we view it, we'll get a readable data.

        // Format tags for display
const formatTags = (tags: any) => tags.map((tag: any) => `${tag.name} (${tag.confidence.toFixed(2) * 100}%)`).join(", ")
      

Here's the final code that you can use on your local. (Don't mind the skeleton screens)