create-img

自动不同大小，形状，颜色的图片

启动生成图片服务

npm install 

npm start

打开http://localhost:3000

注意：koa-logger@2 需要node >7.6版本，否则会报错不支持async函数

前言

实际前端工作中，当UED没有给到确定的图片时，前端需要自己模拟一个图片来实现页面占位。于是写了份自动生成不同大小形状图片的服务。

code地址为https://github.com/raoenhui/create-img/tree/master/server。

demo访问地址http://img.frontendx.cn。

原理

主要用到的技术是koa、koa-router和canvas。

用koa启动一个webserver服务，用了logger中间键来方便查看记录。

const logger = require('koa-logger');

const koaBody = require('koa-body');



const Koa = require('koa');

const app = module.exports = new Koa();



// middleware



app.use(logger());



app.use(koaBody());



// listen



if (!module.parent) app.listen(3000);

用koa-router获取用户访问的url，url中包含大小、形状和颜色信息，并调用canvas画图片。

const router = require('koa-router')();

// route definitions



router.get('/:size/:shape/:bg', list)

  .get('/', list);



app.use(router.routes());



/**

 * Post listing.

 */



 function list(ctx) {

  var sizeAry=ctx.params.size?ctx.params.size.split('x'):[200,200];

  var shape=ctx.params.shape?ctx.params.shape:'rectangle'; //'rectangle||circle'

  var bgColor=ctx.params.bg?`#${ctx.params.bg}`:`#e83632`;



  var imgBuffer=getCanvas({width:Number(sizeAry[0]),height:Number(sizeAry[1]),shape,bgColor});

  ctx.type="image/jpg"

  ctx.status = 200;

  ctx.body = imgBuffer;

}

用canvas根据不同大小、形状和颜色信息画出图片。

var Canvas=require('canvas');

module.exports = function (params) {

  let {shape,width,height,bgColor}=params;

    var canvas = new Canvas(width,width);

    var  ctx = canvas.getContext('2d');

  if(shape=='circle'){

    //圆形

    ctx.beginPath();

    ctx.fillStyle = bgColor;

    ctx.arc(width/2, width/2, width/2, 0, 2*Math.PI, true);

    ctx.fill();



    }else{

      //矩形

          ctx.fillStyle = bgColor;

         ctx.fillRect(0,0,width,height);

    }

  return canvas.toBuffer();

};

第三步 demo

如想获取宽高为200px，颜色为#e83632的圆形。 http://i.frontendx.cn/200x200/circle/e83632

注：http://i.frontendx.cn/宽x高/形状/颜色

![website]({{ site.url }}/images/180501/demo.png)

create-img自动不同大小，形状，颜色的图片

create-img

启动生成图片服务

前言

原理

第三步 demo

相关链接: