Having trouble extracting primary color from image with Microsoft's Computer Vision

I've hit a roadblock with this dilemma that has been perplexing me for quite some time now. My goal is to determine the dominant color of an image using Microsoft's Computer Vision service. A snippet of my code can be seen below:

import {VisualFeatureTypes} from "@azure/cognitiveservices-computervision/esm/models";
...

let visualFeatures: VisualFeatureTypes[] = ['Color'];
const caption = (await computerVisionClient.analyzeImageInStream(describeURL, visualFeatures));

Upon executing console.log(caption), I receive the following JSON object:

{
  "categories": [
    {
      "name": "others_",
      "score": 0.15625
    }
  ],
  "requestId": "5a24115f-8095-4a77-8aa9-2d719dce99e6",
  "metadata": {
    "width": 500,
    "height": 500,
    "format": "Jpeg"
  }
}

The fact that the Computer Vision service functions correctly is evident when I modify the method from analyzeImageInStream to describeImageInStream and observe the appropriate response.

Throughout my testing phase, I've been utilizing this image here, as well as Computer Vision's Demo. Interestingly, the demo provides color information while my API call does not yield the same results.

I would greatly appreciate any assistance on this matter.

Answer №1

According to this document, it is recommended to include the parameters in your URL. View more details here

const urlBase = "https://....cognitiveservices.azure.com/vision/v3.0/analyze";
var params = {
        "visualFeatures": "Categories,Description,Color",
        "details": "",
        "language": "en",
    };

$.ajax({
        url: uriBase + "?" + $.param(params),
        // Request headers.
        beforeSend: function(xhrObj){
            xhrObj.setRequestHeader("Content-Type","application/json");
            xhrObj.setRequestHeader(
                "Ocp-Apim-Subscription-Key", subscriptionKey);
        },
        type: "POST",
        // Request body.
        data: '{"url": ' + '"' + sourceImageUrl + '"}',
    }) .done(function(data) {
        // Display formatted JSON on webpage.
        callYourFunction(data);
    })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prepare for a thorough cross-referencing session

In my attempt to create a tool with 3 inputs that are interdependent - "Earn %", "Earn $" and "Own Price". Initially, the default value for "Earn percentage" is set at "10", making the initial calculation function as intended. Changing this one value auto ...

Converting a React element using JSON.stringify results in transforming it into a JavaScript object

I have an element in React called testReactElement that I want to display on the screen. I also want it to persist even after the user closes the tab and opens it again, so I decided to store it in localStorage. To add a React element to localStorage, I fi ...

Reduce the use of javascript by incorporating NPM specifically after publishing instead of during the building process

My goal is to minify JS files using NPM commands, but I want the minify command to only run after Post Publish and not on Build. Unfortunately, it currently runs after both build and publish. In my Package.json file, I have the following code: "scripts" ...

What is the best way to save an object as a value for a radio input in Vue?

Looking to store values from an array of objects into radio inputs in Vue.js? Here's what I have: const plans = [{type:'2'},{type:'3'},{type:'1'}] I attempted the following approach: <input type="radio" v-mo ...

Why is it that when I refresh a page on localhost, the file download gets stuck until I close the page?

As I work on my HTML/JS files hosted on localhost with Node, I've noticed that when I make changes to the code, Webpack automatically rebuilds the JS files. However, there are times when, after making updates and trying to refresh the page, the downl ...

What is the most effective way to send URL strings to the server-side click handler in a jQuery loop using $.each method?

As I work with URL values in my client-side script, I aim to generate links that can transmit these URL values back to my server-side click handler upon clicking. The server-side code /logclick logs the timestamp and destination of the click for auditing p ...

How can I display a customized component on a table based on the data object's value?

I am working on a custom Table component that I want to render based on an array of objects. The challenge is that I need the Table component to have two props: one for the data object and another for an array of objects, each containing a title and a func ...

Determine in uibmodal /route

Within my code, I have the following: var b = 1 var a = $uibModal.open({ ariaLabelledBy: 'modal-title', ariaDescribedBy: 'modal-body', templateUrl: 'enteModal.html', controller: 'enteCtrl', reso ...

What is the best way to toggle the navigation bar between opened and closed

I'm having trouble with this navbar not opening and closing properly. Can anyone suggest what script I should add? <nav class="navbar navbar-expand-md"> <a class="navbar-brand" href="/"> <img src=&qu ...

Adjust the hue of the three.line when a button in three.js is clicked

Hey there, I'm just starting out with Three.js and I've been having trouble changing the color of a line when a button is clicked. I've created the line using Line Basic Material, but for some reason, the color isn't updating as expecte ...

Using JavaScript, include a child class into a parent class

I am facing an issue with my class hierarchy, which includes classes like Parent, Child1 (which extends Parent), and Child2. Parent contains an array of child items, but importing Child1 and Child2 into Parent leads to circular dependencies and errors whe ...

Trouble with rendering inline images from markdown files in GatsbyJS

I've been trying to include inline images in my markdown file with the gatsby-remark-images plugin. However, I'm facing an issue where the image is not loading on my local host. I'm not sure if it's a syntax error or if I'm missing ...

What could be causing the delay in Handlebars.js binding process after the initial run?

I'm facing a puzzling issue with my Handlebars.js template. Initially, it efficiently renders data into a table without any hiccups. However, subsequent runs take an unexpectedly long time (even with the same data!) and sometimes result in browser cra ...

Consolidate list: Make sure to leave only the currently active item open

For some reason, I am encountering an issue with this code on this platform. The problem is that every time I click on a list title, all items open up instead of just the one I clicked on. Is there a way to modify this code so that only the clicked item ex ...

Attempting to iterate over the array of objects in order to discover a match

I am currently working with an object structure that resembles the one shown in the image linked below. My goal is to compare the inner object properties (such as massing type id) with existing IDs. If there is a match, I want to retrieve the name of that ...

Unable to showcase the chosen option utilizing select2

Utilizing angular-ui's select2 directive has been a bit of a challenge. While the functionality is there, I've encountered an issue where the selected value isn't being displayed properly due to my implementation workaround. <select ...

Problems arise when JQuery fails to function properly alongside ajax page loading

While utilizing ajax to load the page, I encountered an issue where the jQuery on the loaded page template was not functioning until the page was manually refreshed. The ready function being used is: jQuery(document).ready(function() { jQuery(' ...

Generating individual div elements for every piece of data in ReactJS with the help of Redux

I am utilizing redux to manage the data within a React application. Each block of data is displayed within its own DIV element. My goal is to have each div separated by space and transformed into an accordion card. I am seeking guidance on the best appro ...

Unable to utilize the post method in Node.js

<form class="ui form" action"/submit" method="post"> <div class="field"> <label>Time dedicated to studying:</label> <input type="number" name="study" placeholder="Total time spent on studies:"> ...

Deactivating the ajax function is one of the key features of the Framework

I recently attempted to transition my app from plain HTML to framework 7, and while most things were running smoothly, I ran into a roadblock when it came to ajax requests. They simply wouldn't execute, resulting in an error message. Uncaught TypeErro ...