nitin42 / react-color-extractor Goto Github PK
View Code? Open in Web Editor NEWA React component which extracts colors from an image
Home Page: https://react-color-extractor.surge.sh/
A React component which extracts colors from an image
Home Page: https://react-color-extractor.surge.sh/
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 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
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
```
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
Cors issue on chroe working fine on safari
You say the size of this lib is 2.8KB. bundlephobia says its 121 / 35KB (when MINIFIED + GZIPPED)
Which is accurate?
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
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.