因为项目当中用到图片裁剪，本来可以不用到后台进行裁剪的，但是要兼容万恶的IE浏览器，所以不得不使用后台进行裁剪。
这次使用到imgareaselect 插件获取需要裁剪区域的坐标，再由后台进行裁剪操作。先上个效果图再说
但是这里有一个坑就是上传的图片过大，可能会造成裁剪的区域跟插件中显示的不一样，所以得现在后台对云图片进行压缩在裁剪。
/** * 等比例压缩算法： * 算法思想：根据压缩基数和压缩比来压缩原图，生产一张图片效果最接近原图的缩略图 * @param srcURL 原图地址 * @param deskURL 缩略图地址 * @param comBase 压缩基数 * @param scale 压缩限制(宽/高)比例 一般用1： * 当scale>=1,缩略图height=comBase,width按原图宽高比例;若scale<1,缩略图width=comBase,height按原图宽高比例 * @throws Exception */ public static void saveMinPhoto(String srcURL, String deskURL, double comBase, double scale) throws Exception { File srcFile = new java.io.File(srcURL); String ext = srcURL.substring(srcURL.lastIndexOf(".") + 1); Image src = ImageIO.read(srcFile); int srcHeight = src.getHeight(null); int srcWidth = src.getWidth(null); int deskHeight = 0;// 缩略图高 int deskWidth = 0;// 缩略图宽 double srcScale = (double) srcHeight / srcWidth; /**缩略图宽高算法*/ if ((double) srcHeight > comBase || (double) srcWidth > comBase) { if (srcScale >= scale || 1 / srcScale > scale) { if (srcScale >= scale) { deskHeight = (int) comBase; deskWidth = srcWidth * deskHeight / srcHeight; } else { deskWidth = (int) comBase; deskHeight = srcHeight * deskWidth / srcWidth; } } else { if ((double) srcHeight > comBase) { deskHeight = (int) comBase; deskWidth = srcWidth * deskHeight / srcHeight; } else { deskWidth = (int) comBase; deskHeight = srcHeight * deskWidth / srcWidth; } } } else { deskHeight = srcHeight; deskWidth = srcWidth; } BufferedImage tag = new BufferedImage(deskWidth, deskHeight, BufferedImage.TYPE_3BYTE_BGR); tag.getGraphics().drawImage(src, 0, 0, deskWidth, deskHeight, null); //绘制缩小后的图 FileOutputStream deskImage = new FileOutputStream(deskURL); //输出到文件流 ImageIO.write(tag, ext, new File(deskURL)); deskImage.close(); }
这就是压缩之后在进行裁剪了，好了上完整代码先
<!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 href="" type="text/css"> <link href="" > <link type="text/css" href="" > <link href="" type="text/css" /> <link href="" > <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> </head> <body> <include src="https://www.jb51.net/common/user_head.html"></include> <div> <div> <div> <include src="https://www.jb51.net/common/user_menu.html"></include> <div> <div> <h3>上传头像</h3> </div> <div> <div> <div> <img src=""/> </div> <div> <img src=""/> </div> </div> </div> <div> <div> <div>选择图片</div> <input type="file" onchange="uplodImage(this)"> </div> <input type="hidden"> <input type="button" value="上传"> </div> <input type="hidden" value="" /> <input type="hidden" value="" /> <input type="hidden" value="" /> <input type="hidden" value="" /> <input type="hidden" value="" /> <input type="hidden" value="" /> </div> </div> </div> </div> <include src="https://www.jb51.net/common/user_footer.html"></include> </body> </html>
js 代码
function preview(img, selection) { if (!selection.width || !selection.height) return; var scaleX = 100 / selection.width; var scaleY = 100 / selection.height; $('#preview img').css({ width: Math.round(scaleX * 300), height: Math.round(scaleY * 300), marginLeft: -Math.round(scaleX * selection.x1), marginTop: -Math.round(scaleY * selection.y1) }); $('#x1').val(selection.x1); $('#y1').val(selection.y1); $('#x2').val(selection.x2); $('#y2').val(selection.y2); $('#w').val(selection.width); $('#h').val(selection.height); } $(function () { }); //上传原始图片 function uplodImage(target) { if(checkImage(target)){ var url = httpUtils.rootPath+'/component/upload.do'; $.ajaxFileUpload({ url: url, //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议，一般设置为false fileElementId: 'uplodimage', //文件上传域的ID dataType: 'json', //返回值类型 一般设置为json success: function (data) //服务器成功响应处理函数 { var filePath = data.filePath; $('#photo').attr('src',httpUtils.rootPath+'/component/upload.do?action=download&filepath='+filePath); $('#smallImage').attr('src',httpUtils.rootPath+'/component/upload.do?action=download&filepath='+filePath); $('#imgUrl').val(filePath); $('#photo').imgAreaSelect({ aspectRatio: '1:1', x1: 50, y1: 50, x2: 241, y2: 241, handles: true, fadeSpeed: 200, onSelectChange: preview }); $('#x1').val("50"); $('#y1').val("50"); $('#x2').val("241"); $('#y2').val("241"); $('#w').val("191"); $('#h').val("191"); } }); } } //上传裁剪后的图片 function upold() { if($('#imgUrl').val()==''){ layer.alert("请先选择图片在上传"); return false; } $.ajax({ type: "post", url:httpUtils.rootPath+'/user/setHeadPicture', beforeSend: function(request) { request.setRequestHeader("jmtcp", header); }, async:false, data: { x:$('#x1').val(), y:$('#y1').val(), width: $('#w').val(), imgUrl : $('#imgUrl').val(), heigth: $('#h').val() }, dataType: "json", success: function(data){ if(data.code==1){ layer.alert(data.message,function(){ window.location.href = '../user/grzy.html'; }); }else{ layer.alert(data.message); } } }); } function checkImage(target) { var isIE = /msie/i.test(navigator.userAgent) && !window.opera; var fileSize = 0; var filepath = target.value; // 为了避免转义反斜杠出问题，这里将对其进行转换 var re = /(\+)/g; var filename = filepath.replace(re, "#"); // 对路径字符串进行剪切截取 var one = filename.split("#"); // 获取数组中最后一个，即文件名 var two = one[one.length - 1]; // 再对文件名进行截取，以取得后缀名 var three = two.split("."); // 获取截取的最后一个字符串，即为后缀名 var last = three[three.length - 1]; // 添加需要判断的后缀名类型 var tp = "jpg,gif,bmp,JPG,GIF,BMP,png"; // 返回符合条件的后缀名在字符串中的位置 var rs = tp.indexOf(last); // 如果返回的结果大于或等于0，说明包含允许上传的文件类型 if(rs < 0){ layer.alert('您选择的上传文件不是有效的图片文件'); return false; } // if (isIE && !target.files) { // IE浏览器 // var filePath = target.value; // 获得上传文件的绝对路径 // var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); // // GetFile(path) 方法从磁盘获取一个文件并返回。 // var file = fileSystem.GetFile(filePath); // fileSize = file.Size; // 文件大小，单位：b // } // else { // 非IE浏览器 // fileSize = target.files[0].size; // } var img1 = document.getElementById('photo'); //img1.dynsrc=target.value; //img1.fileSize：IE ， fileObj.files[0].fileSize：chrome， fileObj.files[0].size：FF var fileSize = img1.fileSize || target.files[0].fileSize || target.files[0].size; var size = fileSize / 1024 / 1024; if (size > 5) { layer.alert("图片不能大于5M"); return false; } return true; }
后台代码