benhowdle89 / grade Goto Github PK

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.

http://benhowdle.im/grade leads to a Couldn't find that page... Sorry, yo. error.

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

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

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.

Screenshots in below:

Hope the website helps anybody.

❤️

BR

Hi, it would be great to have your lib uploaded on a CDN.

Here the free open source ones:

• https://github.com/cdnjs/cdnjs
• https://github.com/jsdelivr/jsdelivr

Thanks

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.

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

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.

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?

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

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

Awesome tool!
It would be very useful if Grade could work with node as well.

Example usecase:

• Process user profile photos in a background job and extract gradients
• Save the gradients to a database
• Serve gradients as placeholders until actual profile pic loads.

For some applications it could be too expensive to calculate the gradients on the client.

why firefox find this Error
SecurityError: The operation is insecure.

What is the license for this project?

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