create-img

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

MIT License

Stars
33
Committers
3

create-img

npm install 
npm start 

http://localhost:3000

koa-logger@2 node >7.6async

UED

codehttps://github.com/raoenhui/create-img/tree/master/server

demohttp://img.frontendx.cn

koakoa-routercanvas

  • koawebserverlogger

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

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)

:

Happy coding .. :)