一 、准备工作
1.首先需要先下载cropper,常规使用npm，进入项目路径后执行以下命令：
npm install cropper
2. cropper基于jquery，在此不要忘记引入jq,同时记得引入cropper.css
3. 此处后端使用的nodejs，不过不懂node的影响也不大。
二 、 图片裁剪并预览
1.首先利用cropper完成图片裁剪并预览：
<input type="file" name="" id="imgBtn" name="imgCut">
<!-- 预览容器-->
<div class="box">
<img src="" id="preview">
</div>
<!-- 点击上传按钮裁剪-->
<input type="button" name="" value="上传" onclick="imgSubmit()">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/cropper.min.js"></script>
<script>
//生成裁剪区域
$("#imgBtn").change(function(e){
var file = $("#imgBtn").get(0).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
alert('文件读取完成');
$("#preview").attr("src",e.target.result)
var $img = $("#preview");
$('.box > img').cropper({
aspectRatio: 16 / 9,
crop: function(data) {
}
});
} })
//预览裁剪后的图片
function imgSubmit(){
var result= $('.box > img').cropper("getCroppedCanvas");
document.body.appendChild(result);
}
</script>
裁剪并预览的完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/cropper.min.css">
<style type="text/css">
.box{
width: 600px;
height: 600px;
border:5px solid #555fff;
border-radius: 10px;
}
</style>
</head>
<body>
<input type="file" name="" id="imgBtn" name="imgCut">
<!-- 预览容器-->
<div class="box">
<img src="" id="preview">
</div>
<!-- 点击上传按钮裁剪-->
<input type="button" name="" value="上传" onclick="imgSubmit()">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/cropper.min.js"></script>
<script>
//生成裁剪区域
$("#imgBtn").change(function(e){
var file = $("#imgBtn").get().files[];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
alert('文件读取完成');
$("#preview").attr("src",e.target.result)
var $img = $("#preview");
$('.box > img').cropper({
aspectRatio: / ,
crop: function(data) {
}
});
} })
//预览裁剪后的图片
function imgSubmit(){
var result= $('.box > img').cropper("getCroppedCanvas");
document.body.appendChild(result);
}
</script> </body>
</html>
三、图片裁剪预览后以base64发送至服务端
此处后端使用nodejs，没有基础的可以看我之前的nodejs文章。
前端页面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../css/cropper.min.css">
<style type="text/css">
.box{
width: 600px;
height: 600px;
border:5px solid #555fff;
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<input type="file" name="" id="imgBtn" name="imgCut">
<div class="box">
<img src="" id="previewyulan">
</div>
<input type="button" name="" value="上传" onclick="imgSubmit()">
</form> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/cropper.min.js"></script>
<script type="text/javascript">
$("#imgBtn").change(function(e){
var file = $("#imgBtn").get(0).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
alert('文件读取完成');
$("#previewyulan").attr("src",e.target.result)
var $img = $("#preview");
$('.box > img').cropper({
aspectRatio: 16 / 9,
crop: function(data) {
//转换为base64
// var $imgData=$img.cropper('getCroppedCanvas')
// var dataurl = $imgData.toDataURL('image/png');
// $("#previewyulan").attr("src",dataurl)
}
});
} }) function imgSubmit(){
//获取裁剪后的canvas对象
var result= $('.box > img').cropper("getCroppedCanvas");
//将canvas对象转换为base64
var dataurl =result.toDataURL('image/png');
document.body.appendChild(result);
//发起post请求
var data = "img="+dataurl+"";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(event){
if(xhr.readyState == 4){ //4:解析完毕
if(xhr.status == 200){ //200:正常返回
console.log(xhr)
}
}
};
xhr.open('POST','imgCut',true); //true为异步
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(data);
} </script>
</body>
</html>
路由拦截：
app.post("/html/imgCut",function(req,res){
console.log(req.body.img);
//此处省略详细的后端逻辑代码
res.send();
})
有需要可以留言。