一 、准备工作
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(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></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();})有需要可以留言。
cropper.js实现图片裁剪预览并转换为base64发送至服务端。
原文地址：http://www.cnblogs.com/pomelott/p/8098737.html