封裝后的文件
- 文件存儲(chǔ)github地址：cutImg
- 服務(wù)器cutapp.js
//1.express三步創(chuàng)建服務(wù)器基本構(gòu)架
const express=require("express");
const app=express();
app.listen(3333,function () {
console.log("3333 server is running");
});
//2.引入node系統(tǒng)模塊
const path=require("path");
const fs=require("fs");
//3.引入第三方模塊
const formidable=require("formidable");
const sd=require("silly-datetime");
const gm=require("gm");
//4.設(shè)置ejs模板引擎
app.set("view engine","ejs");
//5.設(shè)置靜態(tài)資源目錄
//1）加載ejs文件中的css,js等靜態(tài)資源
app.use("/public",express.static("./public"));
//2）加載uploads文件夾中上傳的圖片
app.use("/uploads",express.static("./uploads"));
//3）加載avatar文件夾上的裁切后的圖片
app.use("/avatar",express.static("./avatar"));
//6.設(shè)置路由
//1）加載上傳文件目錄
app.get('/tofile',function (req, res, next) {
res.render('tofile',{});
});
//2）提交上傳文件數(shù)據(jù)
app.post('/todata',function (req, res, next) {
//新建form對(duì)象
var form=new formidable.IncomingForm();
//設(shè)置文件上傳路徑
form.uploadDir="./uploads/";
//解析上傳的文件參數(shù)
form.parse(req,function (err, fields, files) {
if(err){
console.log('formidble錯(cuò)誤');
return;
}
var oldPath=files.myfile.path;
var originName=files.myfile.name;
var originNameObj=path.parse(originName);
var newName="gms"+sd.format(new Date(),"YYYYMMDD_HHmmss")+originNameObj.ext;
var newPath=form.uploadDir+newName;
//更換上傳的文件路徑和名字
fs.rename(oldPath,newPath,function (err) {
if(err){
console.log('圖片重命名失敗');
return;
}
res.send({'bok':true,'msg':'上傳圖片成功０鹋！掂骏！','imgsrc':newName});
});
})
});
//3）渲染裁切圖頁(yè)面
app.get('/showcutimg',function (req, res, next) {
var cutimgSrc=req.query.cursrc;
res.render('mycut',{
imgsrc:cutimgSrc
})
});
//4）裁切圖片
app.get('/cutimg',function (req, res, next) {
var curobj=req.query;
gm("./uploads/"+curobj.imgsrc)
.crop(curobj.w,curobj.h,curobj.x,curobj.y)
.resize(curobj.xsize,curobj.ysize,"!")
.write("./avatar/"+curobj.imgsrc,function (err) {
if(err){
res.send({"bok":false,"msg":err});
}else{
res.send({"bok":true,"msg":"截圖成功"})
}
});
});
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面轰驳，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>文件上傳頁(yè)面</title>
<!-- Bootstrap -->
<link href="/public/vender/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過(guò) file:// 協(xié)議（就是直接將 html 頁(yè)面拖拽到瀏覽器中）訪問(wèn)頁(yè)面時(shí) Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container files">
<div class="row">
<form class="form-horizontal col-xs-4 col-xs-offset-4">
<div class="form-group">
<h1 style="margin-top: 150px">請(qǐng)上傳圖像</h1>
<label for="myimg">上傳文件</label>
<input type="file" id="myimg" name="myfile">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="button" class="btn btn-primary" id="toBtn">上傳</button>
</div>
</form>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery弟灼，所以必須放在前邊) -->
<script src="/public/vender/jquery/jquery.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件级解。你也可以根據(jù)需要只加載單個(gè)插件。 -->
<script src="/public/vender/bootstrap/js/bootstrap.js"></script>
<script>
//通過(guò)ajax上傳file文件信息
$('#toBtn').on('click',function () {
//獲取form表單的數(shù)據(jù)
var formData=new FormData();
formData.append('myfile',$('#myimg')[0].files[0])
//ajax發(fā)送請(qǐng)求
$.ajax({
url: '/todata',
type: 'POST',
data:formData,
dataType: 'json',
contentType: false,//不需要頭田绑；
processData: false,//不轉(zhuǎn)換數(shù)據(jù)
success: function (data) {
alert(data.msg);
window.location.href='/showcutimg?cursrc='+data.imgsrc;
},
error: function (err) {
console.log(err);
}
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>截圖頁(yè)面</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="/public/js/jquery.min.js"></script>
<script src="/public/js/jquery.Jcrop.js"></script>
<script src="/public/js/jquery-cut.js"></script>
<script src="/public/js/mycut.js"></script>
<link rel="stylesheet" href="/public/css/main.css" type="text/css" />
<link rel="stylesheet" href="/public/css/demos.css" type="text/css" />
<link rel="stylesheet" href="/public/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="/public/css/jquery-cut.css" type="text/css" />
<link rel="stylesheet" href="/public/css/mycut.css" type="text/css" />
<style rel="stylesheet" type="text/css">
#preview-pane .preview-container{
width: 200px;
height: 200px;
}
.jcrop-holder #preview-pane{
top: 30%;
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<img src="/uploads/<%= imgsrc%>" data-imgsrc="<%= imgsrc%>" id="target" alt="cuttu" />
<div id="preview-pane">
<div class="preview-container">
<img src="/uploads/<%= imgsrc%>" class="jcrop-preview" alt="Preview" />
</div>
</div>
<div class="description">
<button id="btn">提交截圖</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
<script>
//必須先聲明
var curobj;
$("#btn").click(function () {
curobj.imgsrc=$("#target").data("imgsrc");
$.ajax({
url:"/cutimg",
type:"get",
data:curobj,
dataType: "json",
success:function (val) {
if(val.bok){
alert(val.msg);
window.location.href="/tofile";//裁切成功后勤哗，跳轉(zhuǎn)回上傳文件頁(yè)面
}else{
console.log(val.msg);
}
},
error:function (err) {
console.log(err);
}
})
});
</script>
</html>
1.項(xiàng)目介紹：完成圖片上傳到裁切的功能；
2.項(xiàng)目依賴
express gm ejs formidable silly-datetime
3.項(xiàng)目運(yùn)行
1）下載node掩驱，運(yùn)行cutapp.js服務(wù)器
2）網(wǎng)頁(yè)地址：http://localhost:3333/tofile 加載上傳文件頁(yè)面
4.目錄分析
uploads: 圖片上傳后的地址
avatar: 圖片裁切后俺陋，保存的地址
