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?