Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Allow a Canvas as an argument in addition to an Image #250

Open
alexeyr-ci opened this issue Oct 16, 2023 · 7 comments
Open

Allow a Canvas as an argument in addition to an Image #250

alexeyr-ci opened this issue Oct 16, 2023 · 7 comments

Comments

@alexeyr-ci
Copy link

In my use-case I already have a Canvas and want to find its dominant colors. It doesn't make much sense to convert it to an image and then draw that image on a canvas.

@janishutz
Copy link

That is true. I am currently working on a big PR, so I could add that as an option... What would you think the API should look like? I can think of three reasonable options:

  1. Adjust getColor to getColor( img: HMTLImageElement | HTMLCanvaasElement, [other options] )
  2. Make img argument optional and add canvas optional argument. One would have to be supplied (this would be a breaking change, as that argument shouldn't be added to the end, which is not ideal)
  3. Add a separate method, which would be called by the getColor one, if an image is specified:
    getColorCanvas( canvas: CanvasImage, [other options] )
    getColor( img: HTMLImageElement ) which would call getColorCanvas

@alexeyr-ci

@alexeyr-ci
Copy link
Author

I think 1 is clear enough, 3 is reasonable if you want to avoid 1.

@janishutz
Copy link

@alexeyr-ci I have implemented this, it is available in my npm package, run npm i @janishutz/colorthief to install it. You may also find the repo at https://github.com/janishutz/color-thief. The new version also features TypeScript support with TypeDefinitions of all functions, as well as updated functions with promises, which have replaced the now deprecated (but still available) async options

@walmink
Copy link

walmink commented Jan 17, 2025

@janishutz I was curious to try out your fork that includes canvas support, but I am unable to figure out how it works. Am I missing something, or did I misunderstanding that you implemented support from directly providing a canvas element? Thanks for your help :)

@janishutz
Copy link

I might have forgotten about that. I was pretty sure I did. I will try to think about updating it tomorrow. Thanks for bringing that up.

@walmink
Copy link

walmink commented Jan 17, 2025

@janishutz Hehe, can happen 😊 I'll keep an eye out if you update it soon, but will also appreciate if you ping me here when you do!

@janishutz
Copy link

@walmink sorry for the long lead time. It should work now. I will push to NPM rq too, so you can also pull from there. If you find issues with it, simply open an issue on my repo

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

4 participants