serve端的可以预处理图片背景，代替图片未加载之前的空白背景

展示

node-grade

安装

npm install node-grade

使用

1
2
3
4
5
6
7
8
var Grade = require('./src/node-grade');
var grade = new Grade({
     img : './res/inside-out.jpg'
 });
/*
background-image: -webkit-linear-gradient(135deg,rgb(107,60,154) 0%,rgb(59,1,152) 75%);
background-image: linear-gradient(135deg,rgb(107,60,154) 0%,rgb(59,1,152) 75%)；
*/

开发

git clone https://github.com/jayZOU/node-grade.git
npm install
node index.js

离线生成原理

使用node-grade库提取2种主色，替换模版中需要显示的背景style

模版HTML

1
2
3
<div class="gradient-wrap p4 mb2 mr1 inline-block" style="">
    <img src="./inside-out.jpg" alt="" />
</div>

编译后HTML

1
2
3
4
<div class="gradient-wrap p4 mb2 mr1 inline-block" style="background-image: -webkit-linear-gradient(135deg, rgb(107,60,154) 0%,rgb(59,1,152) 75%);
background-image: linear-gradient(135deg, rgb(107,60,154) 0%,rgb(59,1,152) 75%)">
    <img src="./inside-out.jpg" alt="" />
</div>

欢迎给issue和star

注意事项

  • 目前只支持jpg/jepg格式的图片