GradeJavaScript库

Grade 是一个 JavaScript 库，作用是从图像中提取前2个主要颜色产生互补的渐变。

Demo 演示地址：http://benhowdle.im/grade/

安装

下载这个库，并从 /docs/dist 文件夹中取出 grade.js

或是使用 npm 方式安装：npm install grade-js

使用

推荐使用HTML结构：

<!--the gradients will be applied to these outer divs, as background-images-->
<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 标签包裹它，并且像这样去初始化：

<script src="path/to/grade.js"></script>
<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>

如果你使用 npm 方式安装，也可以像这样使用库：

import Grade from 'grade-js'
// initialise as above