cropper手机使用实例
一、总结
一句话总结：
启示：还是要多个相关的实例交叉使用，相互印证，查漏补缺，可以更加高效和方便和节约时间
二、Cropper.js从前台到后台的完整实例应用
转自或参考：Cropper.js从前台到后台的完整实例应用
https://blog.csdn.net/chenlkissmm/article/details/80787871
先是html主体
<html lang="zh-CN">
<head>
<link href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../assets/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="../../assets/plugins/cropper/cropper.min.css" rel="stylesheet">
</head>
<body>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="container-fluid">
<div class="card">
<div class="row p-10">
<div class="col-md-8 p-b-10">
<div class="img-container">
<img id="image" src="${sessionScope.headimageurl}" alt="Picture">
</div>
</div>
<div class="col-md-4 docs-buttons">
<div class="docs-preview clearfix">
<div class="img-preview preview-lg"></div>
<div class="img-preview preview-md"></div>
<div class="img-preview preview-sm"></div>
<div class="img-preview preview-xs"></div>
</div>
<div class="btn-group">
<label class="btn btn-primary btn-upload" for="inputImage"> <input type="file"
class="sr-only" id="inputImage" name="file"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"> <span
class="fa fa-upload"> 选择图片</span>
</label>
</div>
<div class="btn-group btn-group-crop">
<button type="button" class="btn btn-success"
data-method="getCroppedCanvas"
data-option="{ "width": 520, "height": 520 }">
<span>
</span> <span class="fa fa-search"> 预览头像</span>
</button>
</div>
<div class="modal fade docs-cropped" id="getCroppedCanvasModal"
aria-hidden="true" aria-labelledby="getCroppedCanvasTitle"
role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="getCroppedCanvasTitle">您的头像</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">取消</button>
<button type="button" class="btn btn-info" id="download"
data-dismiss="modal" οnclick="submitForm()">保存头像</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../assets/plugins/jquery/jquery.min.js"></script>
<script src="../../assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="../../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../../assets/plugins/sweetalert/sweetalert.min.js"></script>
<script src="../../assets/plugins/sweetalert/jquery.sweet-alert.custom.js"></script>
<script src="../../assets/plugins/cropper/cropper.js"></script>
<script src="../../assets/plugins/cropper/main.js"></script>
<script>
function submitForm() {
var cas = $('#image').cropper('getCroppedCanvas', {
width : 520,
height : 520
});// 获取被裁剪后的canvas
var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
var data = encodeURIComponent(base64);//作为URI编码
$.ajax({
url : ".uploadHeadImageServlet",
type : 'POST',
data : "file=" + data,
async : true,
success : function(data) {
sweetAlert({
title : "已保存 ！",
text : "Your headimage file has been updated.",
type : "success"
}, function() {
window.location.href = "myprofile.jsp";
});
}
});
}
</script>
</body>
</html>ajax调用servlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取用户ID
HttpSession session = request.getSession();
String userid = (String) session.getAttribute("id");
//收到AJAX的data
String imagefile = request.getParameter("file");
//执行图片上传方法,并获得头像图片地址
String path = uploadbiz.UploadHeadImage(userid, imagefile);
//更新session中的头像地址
session.setAttribute("headimageurl", path);
}上传方法
package sin.service;
import java.io.FileOutputStream;
import sin.dao.UserInfoDao;
import sin.plugins.NewAFileName;
import sun.misc.BASE64Decoder;
@SuppressWarnings("restriction")
public class UploadHeadImageBiz {
@SuppressWarnings("unused")
public String UploadHeadImage(String userid, String imagefile) {
NewAFileName newname = new NewAFileName();
UserInfoDao userinfodao = new UserInfoDao();
String path = null;
BASE64Decoder decoder = new BASE64Decoder();
try {
//去掉头data:image/jpeg;base64,
String imagebasefile = imagefile.substring(23);
// Base64解码
byte[] bytes = decoder.decodeBuffer(imagebasefile);
for (int i = 0; i < bytes.length; ++i) {
if (bytes[i] < 0) {// 调整异常数据
bytes[i] += 256;
}
}
//生成JPEG图片输出流，名字，保存路径
String filename = userid + newname.getFileName();
path = "../../../../sin/upload/headimages/" + filename;
FileOutputStream out = new FileOutputStream(path);
//更新用户头像URL
Boolean result = userinfodao.updateUserHeadImageById(userid, path);
out.write(bytes);
out.flush();
out.close();
} catch (Exception e) {
}
return path;
}
}附手机上使用的效果图
