benhowdle89 / grade Goto Github PK
View Code? Open in Web Editor NEWThis JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.
Home Page: https://benhowdle89.github.io/grade/
This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.
Home Page: https://benhowdle89.github.io/grade/
http://benhowdle.im/grade leads to a Couldn't find that page... Sorry, yo.
error.
What is the license for this project?
why firefox find this Error
SecurityError: The operation is insecure.
Hi there
Thanks for the plugin! love the simplicity. I understand that the images load up first and that the colors are derived from the images. But is there an ideal time to look out for. Seems to take 1-2s before the DIV colors fill in. Is that the normal performance of the div? Is there a way to work with an IMGIX api to reduce this time taken for the gradient to appear? Would love to get your thoughts.
Cheers
Really like the concept, what would you think about having a method that stops before rendering out the wrapper, and just gets the 2 dominant colours in the image?
Awesome tool!
It would be very useful if Grade could work with node as well.
Example usecase:
For some applications it could be too expensive to calculate the gradients on the client.
Hi !
I downloaded Grade to try it out and when I opened /docs/index.html on Chrome, the backgrounds behind the images are staying white. On the console I got this error :
grade.js:39 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
My Chrome version is 52.0.2743.116 m
This is however working fine on Firefox 44.0.2
Hi, it would be great to have your lib uploaded on a CDN.
Here the free open source ones:
Thanks
My image url will form like this:
a. nn/aa/100.jpg
b. ss/dd/100.jpg
So these images will store with same key in local storage. And rendering same color in background
Cannot get the darn thing to work for the life of me. Just generates an error..specifically this: "Uncaught ReferenceError: module is not defined" line 103
I loved grade js and i worked too many times with this but one day when I was working with an API, images loaded from the link of an image provided in API, but grade js shows exception and doesn't work.
Exception looks like:
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at Grade.getImageData (http://127.0.0.1:5500/cars/static/cars/js/grade.js:41:38)
at Grade.render (http://127.0.0.1:5500/cars/static/cars/js/grade.js:177:18)
at Grade.readImage (http://127.0.0.1:5500/cars/static/cars/js/grade.js:36:18)
at new Grade (http://127.0.0.1:5500/cars/static/cars/js/grade.js:28:14)
at init (http://127.0.0.1:5500/cars/static/cars/js/grade.js:187:21)
at http://127.0.0.1:5500/cars/static/cars/js/grade.js:198:16
at Array.map ()
at module.exports (http://127.0.0.1:5500/cars/static/cars/js/grade.js:197:90)
at http://127.0.0.1:5500/cars/templates/cars/try.html:49:13
getImageData @ grade.js:41
render @ grade.js:177
readImage @ grade.js:36
Grade @ grade.js:28
init @ grade.js:187
(anonymous) @ grade.js:198
module.exports @ grade.js:197
(anonymous) @ try.html:49
load (async)
(anonymous) @ try.html:48
Hi.
Love you Code - got it to work on local small footprint lighttpd webserver. I use the following code to get gradient data and apply it to dom background:
<script src="grade.js"></script> <script> document.addEventListener("DOMContentLoaded", function(event) { Grade(document.querySelectorAll('.grade'), null, function(gradientData){ console.log(gradientData); var r1 = gradientData[0].gradientData[0].rgba[0]; var g1 = gradientData[0].gradientData[0].rgba[1]; var b1 = gradientData[0].gradientData[0].rgba[2]; var a1 = gradientData[0].gradientData[0].rgba[3] * 0.05; var r2 = gradientData[0].gradientData[1].rgba[0]; var g2 = gradientData[0].gradientData[1].rgba[1]; var b2 = gradientData[0].gradientData[1].rgba[2]; var a2 = gradientData[0].gradientData[1].rgba[3] * 0.05; document.body.style.background = "linear-gradient(10deg, rgba("+r1+","+g1+","+b1+","+a1+") 0%, rgba("+r2+","+g2+","+b2+","+a2+") 50%, rgba(255,255,255,1) 100%)"; document.getElementsByClassName('grade')[0].style.display = 'none'; }); }); </script>
It works great, but if I copy the exact same files (all of it - the dirs are identical) to my espasyncwebserver the code somehow returns a correctly structured, but empty array for "gradientData":
lighttpd:
[{…}]0: element: div.gradegradientData: Array(2)0: {rgba: Array(4), occurs: 1, brightness: 180.117}brightness: 180.117occurs: 1rgba: (4) ['128', '223', '96', '8']0: "128"1: "223"2: "96"3: "8"length: 4[[Prototype]]: Array(0)[[Prototype]]: Object1: {rgba: Array(4), occurs: 1, brightness: 148.502}brightness: 148.502occurs: 1rgba: (4) ['77', '179', '179', '10'][[Prototype]]: Objectlength: 2[[Prototype]]: Array(0)[[Prototype]]: Objectlength: 1[[Prototype]]: Array(0)
espasyncwebserver:
[{…}]0: element: div.gradegradientData: Array(2)0: null1: nulllength: 2[[Prototype]]: Array(0)[[Prototype]]: Objectlength: 1[[Prototype]]: Array(0)
There are no error messages in console on both servers - so it seems the code is working fine, but I cannot figure out why on one server the array returnes empty and on the other not.
Maybe it has to do with some async/slow response from espasyncwebserver, but I am too little of a java-async expert (yet) to analyse this sort of problem. Maybe somebody has an idea on how to fix this?
Any help is appreciated.
This looks promising! The only suggestion I have is to somehow generate/suggest text color (either black or white) based on the generated gradient.
Chances are you might want to have text under/above the image(s). If the resulting gradient is dark, you can't use dark text. If the gradient ends up being light, you can't use light text.
But it might be hard to know (especially if you get the images from a service) whether the gradient will end up being light or dark. So, depending on the gradient, somehow it would also "return" either black or white for text color, depending on which would be best readable on the gradient itself.
Of course if the black level of the gradient would end up being around 50% gray, then that's a tough one.
First of all very nice stuff!
But sadly it isn't working in Safari (Version 9.1.2 (10601.7.7)).
I think because you aren't passing any percentages for the gradient.
Maybe this can be solved by just setting the two colours of the gradient as data-attributes
and then read them via CSS so you have less inline styles and better cross-browser implementation.
Thanks for the awesome tool!
I built a website [gradex] for this, it allows user to upload an image then update background image thanks to this tool.
Then user can download the background image or copy the html code.
Hope the website helps anybody.
❤️
BR
I'am getting this error in sample (Chrome osx). I did not change anything:
"grade.js:38 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."
Full error object:
grade.js:38 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
getImageData @ grade.js:38
render @ grade.js:111
readImage @ grade.js:33
Grade @ grade.js:25
(anonymous function) @ grade.js:121
module.exports @ grade.js:120
(anonymous function) @ index.html:109
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.