{"id":13414898,"url":"https://github.com/benhowdle89/grade","last_synced_at":"2025-05-14T11:09:26.651Z","repository":{"id":37580104,"uuid":"66013518","full_name":"benhowdle89/grade","owner":"benhowdle89","description":"This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.","archived":false,"fork":false,"pushed_at":"2022-08-02T07:36:04.000Z","size":458,"stargazers_count":3779,"open_issues_count":5,"forks_count":142,"subscribers_count":52,"default_branch":"master","last_synced_at":"2025-04-03T20:06:44.961Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://benhowdle89.github.io/grade/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benhowdle89.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-18T16:34:14.000Z","updated_at":"2025-03-23T13:43:48.000Z","dependencies_parsed_at":"2022-07-12T16:24:45.108Z","dependency_job_id":null,"html_url":"https://github.com/benhowdle89/grade","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benhowdle89%2Fgrade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benhowdle89%2Fgrade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benhowdle89%2Fgrade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benhowdle89%2Fgrade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benhowdle89","download_url":"https://codeload.github.com/benhowdle89/grade/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248338407,"owners_count":21087208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T21:00:39.523Z","updated_at":"2025-04-11T03:38:31.289Z","avatar_url":"https://github.com/benhowdle89.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Code","JavaScript","前端常用"],"sub_categories":["Uncategorized","library/repositories"],"readme":"# Grade\n\n[![](https://img.shields.io/npm/dt/grade-js.svg)](https://www.npmjs.com/package/grade-js)\n\n## Demo\n\n[Check it out](https://benhowdle89.github.io/grade/)\n\n## Install\n\nDownload this repo and grab the `grade.js` file from the `/docs/dist` folder.\n\nOr install from npm: `npm install grade-js`\n\nUse the CDN link:\n\n`https://unpkg.com/grade-js/docs/dist/grade.js`\n\n## Usage\n\nRecommended HTML structure:\n\n```html\n\u003c!--the gradients will be applied to these outer divs, as background-images--\u003e\n\u003cdiv class=\"gradient-wrap\"\u003e\n    \u003cimg src=\"./samples/finding-dory.jpg\" alt=\"\" /\u003e\n\u003c/div\u003e\n\u003cdiv class=\"gradient-wrap\"\u003e\n    \u003cimg src=\"./samples/good-dinosaur.jpg\" alt=\"\" /\u003e\n\u003c/div\u003e\n```\n\nIf you have the `grade.js` in your project, you can include it with a script tag and initialise it like so:\n\n```html\n\u003cscript src=\"path/to/grade.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    window.addEventListener('load', function(){\n        /*\n            A NodeList of all your image containers (Or a single Node).\n            The library will locate an \u003cimg /\u003e within each\n            container to create the gradient from.\n         */\n        Grade(document.querySelectorAll('.gradient-wrap'))\n    })\n\u003c/script\u003e\n```\n\nIf you pass in a 3rd parameter and it's a function, the HTML element(s) you passed in as the 1st parameter will **not** be manipulated, but an array will be returned to you, for you to do as you please with, ie.\n```javascript\nGrade(document.querySelectorAll('.gradient-wrap'), null, function(gradientData){\n    // sample contents of `gradientData` can be inspected here https://jsonblob.com/57c4601ee4b0dc55a4f180f1\n})\n```\n\nIf you've installed from npm, you can use the library like so:\n\n```javascript\nimport Grade from 'grade-js'\n// initialise as above\n```\n\nThe module this imports will be using ES2015 syntax, so it will need to be transpiled by a build tool, like [Babel](https://babeljs.io/), and if you are importing the module in this fashion (and using npm), I imagine you're already using a bundling tool, like Webpack or Browserify!\n\n## Running locally\n\nIf you want to run this locally, just to test it, you need to serve `index.html` via a webserver, not just by opening it in a browser, else the browser will throw a security error. I would recommend either [live-server](https://www.npmjs.com/package/live-server) (requires Node.js installed on your machine) or if you have Python installed, just run `python -m SimpleHTTPServer` inside the project root. If you're on Windows, I believe WAMP/Apache is the best way to go.\n\n## Remote images\n\nThis plugin utilises the `\u003ccanvas\u003e` element and the `ImageData` object, and due to cross-site security limitations, the script will fail if one tries to extract the colors from an image not hosted on the current domain, *unless* the image allows for [Cross Origin Resource Sharing](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing).\n\n__Enabling CORS on S3__\n\nTo enable CORS for images hosted on S3 buckets, follow the Amazon guide [here](http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html); adding the following to the bucket's CORS configuration:\n\n```xml\n\u003cCORSRule\u003e\n \u003cAllowedOrigin\u003e*\u003c/AllowedOrigin\u003e\n \u003cAllowedMethod\u003eGET\u003c/AllowedMethod\u003e\n\u003c/CORSRule\u003e\n```\n\nFor all images, you can optionally also include a cross-origin attribute in your image.\n\n```html\n\u003cimg src=\"/image.jpg\" cross-origin=\"anonymous\"/\u003e\n```\n\n## License\n\nMIT License\n\nCopyright (c) 2016 Ben Howdle\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenhowdle89%2Fgrade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenhowdle89%2Fgrade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenhowdle89%2Fgrade/lists"}