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
评论