cropper本地预览裁剪，上传到服务器

来源：互联网发布：淘宝宝贝视频制作编辑：程序博客网时间：2024/06/08 09:06

坑爹啊，搞了2天，主要是昨天一直在搞 jcrop，这玩意不能缩放图片。

如果容器定为600px ，从本地选一张大于600px的图片，那么到容器里会压缩， scrop获取不到图片的真实位置，导致上传到后台后，后台裁剪的图片不对

今天重新用cropper搞，终于搞好了。

步骤：

1 通过本地选择图片，预览，通过选取框，选取一个正方形区域（可以设置大小和形状）

2 本地获取左顶点坐标(x,y)，和宽度高度 4个参数

3 然后通过 form表单提交到后台即可

4 后台先把源文件存放，然后通过一个工具类把源文件根据这4个参数裁剪，生成一张图片，

5 我这里是通过 jquery form。js 提交，根据后台返回的json 关闭弹出框，并且把头像 src改为新设置的

效果:

前端源代码:

<pre>

<%@page import="org.w3c.dom.Document"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";

%>

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<base href="<%=basePath%>">


<link rel="stylesheet" href="components/FontAwesome4.4/css/font-awesome.min.css">
<link rel="stylesheet" href="components/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="components/cropper/dist/cropper.css">


<link rel="stylesheet" href="css/main_leftmenu01.css">


<link rel="stylesheet" href="css/cutUserFace.css">



<script src="js/jquery.min.js"></script>
<script src="components/bootstrap/js/bootstrap.min.js"></script>

<script src="components/cropper/dist/cropper.js"></script>




<script src="js/main_leftmenu01.js"></script>

<script src="js/jquery-form.js"></script>
<script src="components/layer2/layer/layer.js"></script>

<script language="JavaScript">

/* 跳出iframe */
if (window != top)

{
top.location.href = location.href;

//parent.location.reload();

}

</script>






<style type="text/css">

body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
max-height: 100%;
}

a {
color:#ffffff;
}

a:visited {
color:#ffffff;
text-decoration: none;
}

a:active {
color:#ffffff;
text-decoration: none;
}
/* hover一定要放在最后面*/
a:hover {
color:#ffffff;
text-decoration: none;
}

/* 主界面 top */
#toptitle {
position: absolute;
top: 0;
left: 0;
height: 100px;
color: #ffffff;
width: 100%;
overflow: hidden;
vertical-align: middle;
background-color: #317eb4;
}

/* 左边菜单 */
#leftmenu {
position: fixed;
top: 100px;
left: 0;
height: 100%;
width: 180px;
overflow: auto;
vertical-align: top;
background-color: #585858;
}

/* 右边内容iframe容器 */
#maincontent {
position: fixed;
left: 180px;
top: 100px;
right: 0;
bottom: 0;
height: 100%;
overflow: auto;
background: #fff;
/* border-top: solid 1px #ea1718;
border-left: solid 1px #ea1718;*/
}

</style>

<script type="text/javascript" language="javascript">

//自动测算内容区域的高度
function iFrameHeight() {
var ifm = document.getElementById("content");
var subWeb = document.frames ? document.frames["content"].document: ifm.contentDocument;
if (ifm != null && subWeb != null) {

ifm.height = subWeb.body.scrollHeight;

if(ifm.height<640)
{
ifm.height=640;
}

//ifm.width = subWeb.body.scrollWidth; 这个不能用，用的话，每点一次左边的连接，右边内容宽度会增加一些
}
}
</script>

</head>
<body id="mainbody">

<div id="leftmenu">

<div class="leftsidebar_box">

<div class="line"></div>

<c:forEach var="superMenu" items="${rightsList}">

<dl>
<dt style="background-image: url(${superMenu.tRightTypes.icopath})">
${superMenu.tRightTypes.name }<img src="components/menu01/images/left/select_xl01.png">
</dt>

<c:forEach var="secMenu" items="${superMenu.rights }" >
<dd>
<a href="${secMenu.url }" target="content">${secMenu.name }</a>
</dd>

</c:forEach>

</dl>

</c:forEach>

</div>

</div>

<div id="toptitle">

<%-- <div style="position: absolute;top: 10px;left: 20px;text-align: center">
<img src="images/a8.jpg" style="width: 64px;height:64px;border-radius: 50%">
<div><a href="javascript:void(0)" id="openBtn">${username }</a></div>

</div> --%>

<div style="text-align: center;">

<h1 style="color: #ffffff">恒金所理财业务管理系统</h1>
</div>

<div style="position: absolute;top: 10px;right: 20px;text-align: center">
<div style="float:right; ;font-size:18px;line-height:89px">

<a href="manager/loginout.html" style="margin-left:20px"> 退出</a>
</div>

<div style="float:right;margin-right:10px;font-size:18px">
<a href="javascript:void(0)" id="openBtn">
<c:choose>
<c:when test="${ not empty user.pic }">
<img src="/userFacePic/${user.pic }" style="width: 64px;height:64px;border-radius: 50%" id="userImage">
</c:when>
<c:otherwise>
<img src="images/a8.jpg" style="width: 64px;height:64px;border-radius: 50%" id="userImage">
</c:otherwise>

</c:choose>

<div style="font-size:12px">${user.realname }</div>
</a>
</div>

</div>

</div>

<div id="maincontent">

<iframe id="content" name="content" onLoad="iFrameHeight()"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
width="100%" src="manager/defaultPage.html"></iframe>


<%-- <c:choose>

<c:when test="${ not empty nowUrl }">
<iframe id="content" name="content" height="99%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" src="${nowUrl}"></iframe>
</c:when>
<c:otherwise>
<iframe id="content" name="content" height="99%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" src="manager/defaultPage.html"></iframe>
</c:otherwise>
</c:choose> --%>

</div>


<div class="modal fade" id="cutPicDialog" >
<div class="modal-dialog" role="document" style="width: 1280px;">

<div class="modal-content">

<div class="modal-header">
头像裁剪
</div>

<div class="modal-body">

<div class="container" style="margin-top: 40px; " >

<form id="userFaceForm" enctype="multipart/form-data">

<input type="hidden" id="userId" name="userId" value="${user.id }">

<div class="row">

<div class="col-md-8"style="border: 1px solid #aaaaaa;border-radius: 4px;padding: 0px" >

<div class="img-container" >

<img id="image" src="images/pic_default.png" alt="选择图片">
</div>
</div>

<div class="col-md-3" style="border: 1px solid #aaaaaa;border-radius: 4px;margin-left: 30px">

<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="docs-data">
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataX">左X</label>
<input type="text" class="form-control" id="dataX" name="dataX" placeholder="x">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataY">左Y</label>
<input type="text" class="form-control" id="dataY" name="dataY" placeholder="y">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataWidth">宽度</label>
<input type="text" class="form-control" id="dataWidth" name="dataWidth" placeholder="width">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataHeight">高度</label>
<input type="text" class="form-control" id="dataHeight" name="dataHeight" placeholder="height">
<span class="input-group-addon">px</span>
</div>


</div>


<div class=" docs-buttons" style="margin-top: 20px">

<div class="btn-group" style="float: left">

<label class="btn btn-danger btn-upload " for="inputImage" title="选择图片" style="width:100px">
<input type="file" class="sr-only" id="inputImage" name="inputImage" accept="image/*" >
<span class="docs-tooltip" data-toggle="tooltip" title="选择图片">
<span class="fa fa-file-photo-o "></span> 选图片 </span>
</label>
</div>

<div class="btn-group" style="float: left; ">

<button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
<span class="docs-tooltip" data-toggle="tooltip" title="放大图片">
<span class="fa fa-search-plus"></span>
</span>
</button>

<button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
<span class="docs-tooltip" data-toggle="tooltip" title="缩小图片">
<span class="fa fa-search-minus"></span>
</span>
</button>

</div> 

<div style="clear: both"> </div>

<div class="btn-group" style="float: left">

<button type="button" class="btn btn-default" data-dismiss="modal" style=" width: 100px;">

<span class="fa fa-close"></span>取消 </span>
</button>

</div>

<div class="btn-group" style="float: left">
<button type="submit" class="btn btn-primary" style=" width: 100px;">

<span class="fa fa-check"></span>提交
</span>
</button>

</div>


</div> 
</div>

</div>

</div>

</form>

</div>


</div>



</div>

</div>

<script>

$(function () {
'use strict';
var console = window.console || { log: function () {} };
var $image = $('#image');

var $dataX = $('#dataX');
var $dataY = $('#dataY');
var $dataHeight = $('#dataHeight');
var $dataWidth = $('#dataWidth');
var $dataRotate = $('#dataRotate');
var $dataScaleX = $('#dataScaleX');
var $dataScaleY = $('#dataScaleY');
var options = {
//选框区域 1:1
aspectRatio: 1 / 1,

//预览区域
preview: '.img-preview',
crop: function (e) {
$dataX.val(Math.round(e.x));
$dataY.val(Math.round(e.y));
$dataHeight.val(Math.round(e.height));
$dataWidth.val(Math.round(e.width));
$dataRotate.val(e.rotate);
$dataScaleX.val(e.scaleX);
$dataScaleY.val(e.scaleY);
}
};

// Tooltip
$('[data-toggle="tooltip"]').tooltip();

// 响应选框事件
$image.on({
'build.cropper': function (e) {
console.log(e.type);
},
'built.cropper': function (e) {
console.log(e.type);
},
'cropstart.cropper': function (e) {
console.log(e.type, e.action);
},
'cropmove.cropper': function (e) {
console.log(e.type, e.action);
},
'cropend.cropper': function (e) {
console.log(e.type, e.action);
},
'crop.cropper': function (e) {
console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
},
'zoom.cropper': function (e) {
console.log(e.type, e.ratio);
}
}).cropper(options);

// 放大缩小事件 2个按钮上增加了 data-method="zoom" 属性
$('.docs-buttons').on('click', '[data-method]', function () {
var $this = $(this);
var data = $this.data();
var $target;
var result;

if ($this.prop('disabled') || $this.hasClass('disabled')) {
return;
}

if ($image.data('cropper') && data.method) {
data = $.extend({}, data); // Clone a new one

if (typeof data.target !== 'undefined') {
$target = $(data.target);

if (typeof data.option === 'undefined') {
try {
data.option = JSON.parse($target.val());
} catch (e) {
console.log(e.message);
}
}
}

result = $image.cropper(data.method, data.option, data.secondOption);

switch (data.method) {
case 'scaleX':
case 'scaleY':
$(this).data('option', -data.option);
break;

case 'getCroppedCanvas':
if (result) {

// Bootstrap's Modal
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);

if (!$download.hasClass('disabled')) {
$download.attr('href', result.toDataURL());
}
}

break;
}

if ($.isPlainObject(result) && $target) {
try {
$target.val(JSON.stringify(result));
} catch (e) {
console.log(e.message);
}
}

}
});

// Keyboard
$(document.body).on('keydown', function (e) {

if (!$image.data('cropper') || this.scrollTop > 300) {
return;
}

switch (e.which) {
case 37:
e.preventDefault();
$image.cropper('move', -1, 0);
break;

case 38:
e.preventDefault();
$image.cropper('move', 0, -1);
break;

case 39:
e.preventDefault();
$image.cropper('move', 1, 0);
break;

case 40:
e.preventDefault();
$image.cropper('move', 0, 1);
break;
}

});

// 选择图片预览图片
var $inputImage = $('#inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;

if (URL) {

$inputImage.change(function () {

var files = this.files;
var file;

if (!$image.data('cropper')) {
return;
}

if (files && files.length) {
file = files[0];

if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
$image.one('built.cropper', function () {

// Revoke when load complete
URL.revokeObjectURL(blobURL);
}).cropper('reset').cropper('replace', blobURL);
//$inputImage.val('');
} else {
window.alert('请选择一张图片.');
}
}
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}


//提交到后台
$("#subBtn").click(function(){

//通过 jqueryForm 进行 ajax提交

$("#cutPicDialog").modal('hide')
});



$("#cutPicDialog").on('hidden.bs.modal', function (e) {

$("#image").cropper('destroy').cropper(options);

})



});

</script>

</div>



</body>


<script>



$("#openBtn").click(function()
{

$('#cutPicDialog').modal({
keyboard:false, //键盘 ESC不关闭
backdrop:'static' //点击空白区不关闭
})

});


$("#openBtn").click(function()
{

$('#cutPicDialog').modal({
keyboard:false, //键盘 ESC不关闭
backdrop:'static' //点击空白区不关闭
})

});


//无论如何关闭，都把 image重置
/* $("#cutPicDialog").on('hidden.bs.modal', function (e) {

$("#image").cropper('destroy').cropper(options)
}) */



</script>


<script>

$(function(){

var options = {
url: "manager/setUserFacePic.html" ,
type: "post" ,
beforeSubmit: showRequest, //提交前处理
success: showResponse, //处理完成
resetForm: false, //把表单清空，由于有图片预览，需要在 showResponse 里单独处理
dataType: "json",

};

$("#userFaceForm").submit(function() {

$(this).ajaxSubmit(options);
// 阻止默认的提交事件
return false;

});
});

//提交前验证
function showRequest(formData, jqForm, options) {

if ($("#dataX").val()=="")
{

return false;
}

if ($("#dataX").val()=="")
{

return false;
}

if ($("#dataY").val()=="")
{

return false;
}

if ($("#dataWidth").val()=="")
{

return false;
}

if ($("#dataHeigh").val()=="")
{

return false;
}

return true;
}
//获取反馈信息
function showResponse(responseText, statusText) {



if (responseText.code==1)
{
//使用自定义的弹窗，可以控制相对于谁弹窗。而 Layer弹窗默认是屏幕中间


$("#dataX").val("");
$("#dataY").val("");
$("#dataWidth").val("");
$("#dataHeigh").val("");

$("#cutPicDialog").modal('hide');
layer.msg("头像设置成功");

$("#userImage").attr("src","/userFacePic/"+responseText.msg);

}


}

</script>

</html>

</pre>

后台代码

0 6

cropper本地预览 裁剪，上传到服务器

cropper本地预览裁剪，上传到服务器