使用cropbox实现图片剪切上传
之前也在网上看了很多 只有这个图片剪切框架是不通过服务器裁剪图片存储到服务器，通过base64存储到服务器 直接发送到imgsrc里直接解析显示
需要用到的js.jar包有cropbox.js，cropbox附带的css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片裁剪</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/cropbox.js"></script>
<div class="container">
<div class="imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none;">Loading...</div>
</div>
<div class="action">
<input type="file" id="file" style="float:left; width: 250px" >
<input type="button" id="btnCrop" value="Crop" style="float: right">
<input type="button" id="btnZoomIn" value="+" style="float: right">
<input type="button" id="btnZoomOut" value="-" style="float: right">
</div>
<div class="cropped"></div>
</div>
<script type="text/javascript">
$(window).load(function() {
var options =
{
thumbBox: ".thumbBox",
spinner: ".spinner",
imgSrc: ""
}
// var cropper = $(".imageBox").cropbox(options);
$("#file").on("change", function(){
var reader = new FileReader();
reader.onload = function(e) {
options.imgSrc = e.target.result;
cropper = $(".imageBox").cropbox(options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
$("#btnCrop").on("click", function(){
$(".cropped").empty();
var img = cropper.getDataURL();
$(".cropped").append("<img src=""+img+"">");
//点击请求发送ajax请求
url:"http://localhost:8080/cut/list.do",
data:{"data":img},
type:"post",
dataType:"json",
})
})
$("#btnZoomIn").on("click", function(){
cropper.zoomIn();
})
$("#btnZoomOut").on("click", function(){
cropper.zoomOut();
})
});
</script>
<div style="text-align:center;">
</div>
</body>
</html>
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 解决thinkphp图片上传生成缩略图背景为黑色的问题
- 下一篇： 对上传的图片进行裁剪处理后保存
