node-grade 离线生成图片未加载前背景
发布在前端菜鸟自学2016年9月6日view:1697YiksiAssow
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

node-grade

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

展示

node-grade

安装

npm install node-grade

使用

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

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

编译后HTML

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

欢迎给issuestar

注意事项

  • 目前只支持jpg/jepg格式的图片
评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
前端菜鸟自学

分享一些学习经历和一些教程

我的收藏