grade.js是一款可以根据图片的两种主要颜色生成背景渐变的JS插件。它的原理是提取图片的两种主要颜色，然后使用这两种颜色为渐变的开始和结束颜色，应用在图片容器上。
安装
可以通过npm来安装grade.js插件。
npm install grade-js
使用方法
在页面中引入grade.js文件。
<script type="text/javascript" src="dist/grade.js"></script>
HTML结构
在使用该插件时建议使用下面的HTML结构。
<!-- 渐变将被应用在div元素上 -->
<div class="gradient-wrap">
<img src="./samples/finding-dory.jpg" alt="" />
</div>
<div class="gradient-wrap">
<img src="./samples/good-dinosaur.jpg" alt="" />
</div>
初始化插件
使用下面的方法来初始化grade.js插件。
<script type="text/javascript">
window.addEventListener('load', function(){
/*
A NodeList of all your image containers (Or a single Node).
The library will locate an <img /> within each
container to create the gradient from.
*/
Grade(document.querySelectorAll('.gradient-wrap'))
})
</script>
grade.js插件的github地址为：https://github.com/benhowdle89/grade
