• 需求

  • 當(dāng)訪問(wèn)對(duì)應(yīng)的路由的時(shí)候，我們?cè)O(shè)置顯示對(duì)應(yīng)裁剪圖片的頁(yè)面

  • 然后當(dāng)點(diǎn)擊提交的時(shí)候，我們?cè)O(shè)置對(duì)應(yīng)的路由處理提交的參數(shù)

  • 然后設(shè)置圖片的操作

• 先加載靜態(tài)資源

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

/*設(shè)置處理路由*/
/*設(shè)置靜態(tài)路由*/
app.use(express.static('./public'));

app.listen(3000);

• 當(dāng)點(diǎn)擊提交的時(shí)候，即訪問(wèn)/upload的時(shí)候，我們獲取圖片裁剪的數(shù)據(jù)。然后對(duì)圖片進(jìn)行裁剪。提交的請(qǐng)求時(shí)post請(qǐng)求。注意是使用gm進(jìn)行裁剪

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

/*設(shè)置對(duì)應(yīng)的編碼*/
app.use(bodyParser.urlencoded({ extended: false }));
/*設(shè)置對(duì)應(yīng)json*/
app.use(bodyParser.json());

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

    /*通過(guò)獲取對(duì)應(yīng)的提交的參數(shù)獲取大小位置*/
    var w = req.body.w;
    var h = req.body.h;
    var x1 = req.body.x1;
    var y1 = req.body.y1;

    /*使用gm裁剪圖片
     * 使用crop方法
     * 第一個(gè)參數(shù)表示寬度
     * 第二個(gè)參數(shù)表示高度
     * 第三個(gè)參數(shù)表示x
     * 第四個(gè)參數(shù)表示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('裁剪成功');
});

• 具體步驟

/*我們當(dāng)訪問(wèn)對(duì)應(yīng)的路由的時(shí)候，我們?cè)O(shè)置顯示對(duì)應(yīng)裁剪圖片的頁(yè)面
 * 然后當(dāng)點(diǎn)擊提交的時(shí)候，我們?cè)O(shè)置對(duì)應(yīng)的路由處理提交的參數(shù)
 * 然后設(shè)置圖片的操作*/

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

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

/*設(shè)置處理路由*/
/*設(shè)置靜態(tài)路由*/
app.use(express.static('./public'));

/*設(shè)置對(duì)應(yīng)的編碼*/
app.use(bodyParser.urlencoded({ extended: false }));
/*設(shè)置對(duì)應(yīng)json*/
app.use(bodyParser.json());

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

    /*通過(guò)獲取對(duì)應(yīng)的提交的參數(shù)獲取大小位置*/
    var w = req.body.w;
    var h = req.body.h;
    var x1 = req.body.x1;
    var y1 = req.body.y1;

    /*使用gm裁剪圖片
     * 使用crop方法
     * 第一個(gè)參數(shù)表示寬度
     * 第二個(gè)參數(shù)表示高度
     * 第三個(gè)參數(shù)表示x
     * 第四個(gè)參數(shù)表示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);