Get the color palette from an image link

There is an input field that accepts an image URL.

The objective is to analyze the image and extract two hexadecimal colors from it.

After conducting some research, I came across a solution at this link:

I attempted to implement this solution with the following:

Image

<img name="logo_path" id="skill-icon" src="/img/default.png" width="300px"><br><br>

Input

<input type="file" class="form-control" name="logo_path" aria-describedby="fileHelp">

JS

var icon = $('#skill-icon');
icon.attr('src', $( "#url-logo" ).val());

$( "#url-logo" ).on('keyup',function(){


    var vibrant = new Vibrant(icon);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())

    /*
     * Results into:
     * Vibrant #7a4426
     * Muted #7b9eae
     * DarkVibrant #348945
     * DarkMuted #141414
     * LightVibrant #f3ccb4
     */
}); 

Unfortunately, I encountered issues while trying to make it work.

I was consistently receiving the following error:

https://i.sstatic.net/bwyah.png

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

I have created a fiddle as well:

https://jsfiddle.net/bheng/fkqx5gad/

https://i.sstatic.net/jeKtj.png

Do you have any suggestions on how I can accomplish this task?

Answer №1

The issue arises from the image being situated on another domain. To resolve this, include the attribute crossDomain = "anonymous" within the image tag.

For instance:

<img src="test.jpg" crossOrigin="anonymous" />

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

I'm having trouble getting my jQuery to connect with my HTML, no matter what I do

UPDATE: Thank you everyone, I finally figured out that it was the API causing the issue. Even though I downloaded the files to avoid server requests, I will switch to using https instead. I have a couple of questions. Why isn't my code functionin ...

Removing a blank line from a null variable in PHP and appending a backspace to it to display HTML text

How can I remove the empty line for a null variable? For example: $line1 = "Hello All"; $line2 = "Hello You"; $line3 = "Hello Me"; $line2 = null; Now when I echo echo "$line1<br>$line2<br>$line3"; it shows an empty line in the middle whe ...

MongoDB subfield pagination technique

I am looking to retrieve specific data from a sub-field in a MongoDB collection and implement pagination for it. Thank you! { "_id": "616d274c655e0000ee005f32", "subscription": [ { "account_admin&q ...

Issue with JQuery autocomplete

I am encountering an issue with the JQuery Autocomplete plugin where it is not providing autocomplete suggestions when I enter text. Any thoughts on why this might not be working for my code? The basic example works fine, but mine does not seem to functio ...

Execute a task when every class element contains a value

$("#btn_02").click(function(){ $(".quant").each(function() { var quantity = $(this).html(); alert (quantity); // each value is 0 if (quantity == 0) {return false;} }); $.ajax({ url: "process02.php", succ ...

Leveraging AJAX for managing multiple selection options without the need for a submit button

Currently, I have a page featuring two select buttons. Whenever both are selected, the page should update automatically. Furthermore, each time a new option is chosen, the page needs to keep updating on its own. Below is my HTML code: <form action="" m ...

What is the best way to turn an entire table into a clickable link that leads to a different HTML page?

I have created a table that I want to turn into a button linking to another page. The table's values need to be changeable based on data from a database, such as changing the parameter to pH and the value to 7. However, the button should redirect to t ...

function to trigger lazy loading with jQuery and callback function

Currently, I am triggering a function when lazyload renders an image, which is working well. However, the issue arises when I need to access $(this) within the function. Is there a way to pass this data to the function? You can view the code in action on ...

Having trouble clicking or submitting a button with Selenium Webdriver in JavaScript

Having trouble with clicking or submitting a button in my test script using selenium-webdriverjs. Using the following NPM modules: selenium-webdriver mocha chai chai-as-promised After filling out the form, I am unable to click the button to proceed to ...

Tips for transmitting data from a form to a server

I need assistance with sending form data to my backend server for a small website project. Although I have most of the backend work completed, I am struggling to figure out how to send the form data to the server. My goal is to send the data to a localhost ...

extract the information from the JSON structure

Currently, I am in the process of learning JSON. $.ajax({ async: true, type: "POST", url: "fetch.....data.jsp", data: "vendorId="+vendor, success: function(json){ alert( "Received Data: " + ...

Mastering the correct usage of preload.js in Electron

As I explore the use of Node modules, like fs, in my renderer processes, I encountered an error while attempting to implement it: // main_window.js const fs = require('fs') function action() { console.log(fs) } Keep in mind that the action ...

Executing code prior to sending a form with JQuery

I created a form and specified onsubmit="return false" as its attribute. Now, I want to perform some actions before the actual submission takes place. Here is an example of what I need to do: $('input[name=submit]').click(function(){ $(&apo ...

Would you prefer to showcase data in a horizontal format instead of a vertical one

My issue lies with a table that pulls data from a database. My goal is to showcase each staff member in a horizontal layout, but at the moment, they are appearing vertically. include 'includes/connect.php'; $select_staff = "select * FROM staff" ...

Validate a string to determine if it is a legitimate numerical value using Javascript

How can we accurately determine if a string is a valid number in JavaScript? Although the method isNaN(str) is commonly used, it has limitations in certain cases, Current behavior: isNaN("1") = false, as it is a number, isNaN("1 ") = ...

Choose a specific row in a q-table by clicking a button in Vue.js

Whenever I click the edit button located in the action buttons within the q-table, a modal window pops up. However, I encounter an error when attempting to update the modal because the checkbox within the q-table is not selectable. What I am aiming for is ...

Building a simple messaging platform with the power of Socket.io and Node.js

After following the guide at http://socket.io/get-started/chat/, I attempted to create a basic chat application. However, upon running npm install --save socket.io I encountered the error message below. How can I resolve this issue? npm WARN package.jso ...

Calculate the number of days between two dates within the same ASPxDateEdit Control using JavaScript

I am working with an ASPxDateEdit control and here is the code snippet: <dx:ASPxDateEdit ID="dtPayDate" ClientInstanceName="dateEdit" EditFormatString="yyyy-MM-dd" DisplayFormatString="yyyy-MM-dd" runat="server" EnableClientSideAPI="true" CssClass="for ...

What purpose does AJAX / AJAJ serve in Sails Express JS apart from facilitating asynchronous processing?

When considering practicality, what are the strengths and weaknesses of using AJAX or AJAJ in comparison to other standards like HTML post followed by: res.render('returnView', {outputVariable: V }) Does it matter if processing the input takes ...

Is there a built-in method called router.reload in vue-router?

Upon reviewing this pull request: The addition of a router.reload() method is proposed. This would enable reloading with the current path and triggering the data hook again. However, when attempting to execute the command below from a Vue component: th ...