封装后的文件
- 文件存储github地址：cutImg
- 服务器cutapp.js
//1.express三步创建服务器基本构架
const express=require("express");
const app=express();
app.listen(3333,function () {
console.log("3333 server is running");
});
//2.引入node系统模块
const path=require("path");
const fs=require("fs");
//3.引入第三方模块
const formidable=require("formidable");
const sd=require("silly-datetime");
const gm=require("gm");
//4.设置ejs模板引擎
app.set("view engine","ejs");
//5.设置静态资源目录
//1）加载ejs文件中的css,js等静态资源
app.use("/public",express.static("./public"));
//2）加载uploads文件夹中上传的图片
app.use("/uploads",express.static("./uploads"));
//3）加载avatar文件夹上的裁切后的图片
app.use("/avatar",express.static("./avatar"));
//6.设置路由
//1）加载上传文件目录
app.get('/tofile',function (req, res, next) {
res.render('tofile',{});
});
//2）提交上传文件数据
app.post('/todata',function (req, res, next) {
//新建form对象
var form=new formidable.IncomingForm();
//设置文件上传路径
form.uploadDir="./uploads/";
//解析上传的文件参数
form.parse(req,function (err, fields, files) {
if(err){
console.log('formidble错误');
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）渲染裁切图页面
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个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>文件上传页面</title>
<!-- Bootstrap -->
<link href="/public/vender/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 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">请上传图像</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 插件。你也可以根据需要只加载单个插件。 -->
<script src="/public/vender/bootstrap/js/bootstrap.js"></script>
<script>
//通过ajax上传file文件信息
$('#toBtn').on('click',function () {
//获取form表单的数据
var formData=new FormData();
formData.append('myfile',$('#myimg')[0].files[0])
//ajax发送请求
$.ajax({
url: '/todata',
type: 'POST',
data:formData,
dataType: 'json',
contentType: false,//不需要头；
processData: false,//不转换数据
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>截图页面</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";//裁切成功后，跳转回上传文件页面
}else{
console.log(val.msg);
}
},
error:function (err) {
console.log(err);
}
})
});
</script>
</html>
1.项目介绍：完成图片上传到裁切的功能；
2.项目依赖
express gm ejs formidable silly-datetime
3.项目运行
1）下载node，运行cutapp.js服务器
2）网页地址：http://localhost:3333/tofile 加载上传文件页面
4.目录分析
uploads: 图片上传后的地址
avatar: 图片裁切后，保存的地址
网友评论