nitin42 / react-color-extractor Goto Github PK

I was hoping that I could use this component to extract colors from movie posters sent from the movie database api but none of the jpg images will work in the code. I have been trying with the code from the example and am able to get a lot of my own images when trying images from the web it doesn't work. Am I doing something wrong or are there limitations that i am not seeing?
thank you

Access to Image at 'https://s3.ap-south-1.amazonaws.com/workmob-v3/users_posts/154/2227/post_image_1548850277394_2227.png' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access.

this error is showing while using in my code please help

You say the size of this lib is 2.8KB. bundlephobia says its 121 / 35KB (when MINIFIED + GZIPPED)
Which is accurate?

Cors issue on chroe working fine on safari

Here's the code, it does not return any color palette but it works when using some image that I saved from google.

`
import { ColorExtractor } from 'react-color-extractor';

return (
<ColorExtractor getColors={colors => this.setState({ colors })}>
<img src='https://cms.dmpcdn.com/dev_sportschedule/2019/07/26/816e2b70-da46-4c2e-98f8-3e621dafc4a6_original.jpg' style={{ width: 700, height: 500 }} />

)
`
Could you help me find the solutions to this issue
and if you have any suggestion please tell me
Thank you in advance
N.

having cors problem, and "chrome extension" shouldnt be the fix, because my end users wont have any extensions to see my website.

what could be the solve?

hello i have a react project im working on ( link )
where my website gets a random image from a folder in my repo.
i use that image path inside a component which gets displayed on the page totally fine.

                          <ProgressiveImage
                                    className={"colorSrcImg"}
                                    alt={"color source image"}
                                    src={colorSrcImg}
                                />

where the value of colorSrcImg is a string like so: /static/media/R-4452671-1365273054-3687.jpeg.b837e956.jpg
but when i try to use that same src value for ColorExtractor like so:

                                <ColorExtractor
                                    onError={error => console.log(error)}
                                    src={colorSrcImgThumbnail}
                                    getColors={colors => console.log(colors)}
                                />

i get an error in my web console:

index.js:1350 Please provide an image url using the 'src' prop or wrap an image element under the <ColorExtractor /> component. Check out the docs for more info - https://goo.gl/rMZ5L7

am I loading my image wrong? will this /static/media/ filepath work? In my repo the images are hosted?

my file being mentioned is here:
https://github.com/MartinBarker/react-auth-app/blob/colorExtractor/src/Components/MainSidebar.js#L90

The prop called maxColors does not limit the number of colors from the element. No matter if i add 4 (as number) or 10 (as number) it is still the same 6 different colors coming out.

I'm using image generated on the fly, and it doesn't work. Is there a solution ?

const logo = "http://www.edgebase.com/companies/amazon/logo?width=80&height=80"

<ColorExtractor src={logo} getColors={colors => console.log(colors)} onError={error => console.log(error)} />

Cannot load buffer as an image in browser
    at BrowserImage../node_modules/node-vibrant/lib/image/browser.js.BrowserImage.load (browser.js:64)
    at ColorExtractor._this.useDefaultImageClass (react-color-extractor.es.js:74)
    at react-color-extractor.es.js:67

```