Streaming live at 10am (PST)

Help with ColorThief

Hello,

I’m having a lot of trouble getting some custom code to work. I’d like to have a specific div have its background color become the dominate color from a specific image.


https://lokeshdhakar.com/projects/color-thief/

Frankly any way I can achieve this whether it’s with ColorThief or something else doesn’t matter to me.

I see this question was asked before but was unresolved. Using ColorThief

I tried using the code mentioned but it did not work and returned with the following error:
“ReferenceError: Can’t find variable: colorThief”

<script>
Webflow.push(function() {
  $.getScript('https://cdn.rawgit.com/lokesh/color-thief/master/dist/color-thief.min.js', function() {
    var color = colorThief.getColor($('#insertImageId'));
    $('#insertDivId').css('background-color', color);
  });
});
</script>

Unfortunately I do not have any background in javascript, so everything has been trial and error. Any help would be greatly appreciated!

Here is a read only link if that helps: Webflow - Joe Fusaro

Thanks!

Hello Reid,
Interesting and I may need to do something similar in the future.
I don’t have time to check but I found this video that may help you.
https://www.youtube.com/watch?v=BTWPDboW38o

1 Like

HI @ReidPar I have tried a few months ago to do exactly identical thing. Answer is that you can’t do that without use of WF API as you need to get access to image (to get average color) that sits on other server than your project and this will cause CORS.

Thank you @iDATUS I will certainly give that a try.

@Stan yes, I did encounter a CORS error during some earlier tests. I’ve tried quite a few javascript and jquery Plugins to no avail (and again I don’t know a smidge of javascript so I was probably doing it all wrong).

I’d be super bummed if there is no way to do this…
I do have a work around, which is to let the user input the color to be used in the CMS. But I was really hoping to avoid that to make it all automatic.

hi @ReidPar I have end up with adding color generated in external online service and add color manually. This is only way if you do not know how to create (code) and host your own API that will process image (generate color) on fly on the server. Actually there can be another way as using Zappier, Integromat etc. but I never use these services.

One of reasons I have stopped using WF (beside restrictions and limitations) is that working with WF API in PIN and I went back to code everything from scratch including API’s. According to WF no-code conference from last week there is no sign that WF working on improvements for developers. All “BIG” news were made for mouse-clickers and only one thing released are filters in BETA that are actually CSS one-liners. So… you get the point…

Thanks for your reply @Stan.

I’ve decided to abandon this and just enter the color manually as you said.

Hopefully one day there can be a solution.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.