gm的应用

• 需求

  • 当访问对应的路由的时候，我们设置显示对应裁剪图片的页面

  • 然后当点击提交的时候，我们设置对应的路由处理提交的参数

  • 然后设置图片的操作

• 先加载静态资源

var express = require('express');
var app = express();

/*设置处理路由*/
/*设置静态路由*/
app.use(express.static('./public'));

app.listen(3000);

• 当点击提交的时候，即访问/upload的时候，我们获取图片裁剪的数据。然后对图片进行裁剪。提交的请求时post请求。注意是使用gm进行裁剪

var bodyParser = require('body-parser');
var gm = require('gm');

/*设置对应的编码*/
app.use(bodyParser.urlencoded({ extended: false }));
/*设置对应json*/
app.use(bodyParser.json());

/*处理提交路由*/
app.use('/upload',function (req, res) {

    /*通过获取对应的提交的参数获取大小位置*/
    var w = req.body.w;
    var h = req.body.h;
    var x1 = req.body.x1;
    var y1 = req.body.y1;

    /*使用gm裁剪图片
     * 使用crop方法
     * 第一个参数表示宽度
     * 第二个参数表示高度
     * 第三个参数表示x
     * 第四个参数表示y*/
    gm('./sago.jpg').crop(w,h,x1,y1).write('./sago3.jpg',function (err) {
        if (err){
            console.log(err);
            return;
        }
        console.log('success');
    });
    res.send('裁剪成功');
});

• 具体步骤

/*我们当访问对应的路由的时候，我们设置显示对应裁剪图片的页面
 * 然后当点击提交的时候，我们设置对应的路由处理提交的参数
 * 然后设置图片的操作*/

var express = require('express');
var app = express();

var bodyParser = require('body-parser');
var gm = require('gm');

/*设置处理路由*/
/*设置静态路由*/
app.use(express.static('./public'));

/*设置对应的编码*/
app.use(bodyParser.urlencoded({ extended: false }));
/*设置对应json*/
app.use(bodyParser.json());

/*处理提交路由*/
app.use('/upload',function (req, res) {

    /*通过获取对应的提交的参数获取大小位置*/
    var w = req.body.w;
    var h = req.body.h;
    var x1 = req.body.x1;
    var y1 = req.body.y1;

    /*使用gm裁剪图片
     * 使用crop方法
     * 第一个参数表示宽度
     * 第二个参数表示高度
     * 第三个参数表示x
     * 第四个参数表示y*/
    gm('./sago.jpg').crop(w,h,x1,y1).write('./sago3.jpg',function (err) {
        if (err){
            console.log(err);
            return;
        }
        console.log('success');
    });
    res.send('裁剪成功');
});


app.listen(3000);