图片上传+预览+剪切解决方案-我们到底能走多远系列（20）
我们到底能走多远系列（20）
扯淡：12月15号预订的mx2，现在还没货，唉悲剧。本来想参加朋友婚礼前换个手机的，看来是指望不上了，朋友结婚，5星级酒店，那酒店我高中的时候每天会望望它的楼顶有没有盘旋的直升机，总算咋也能进去吃个饭喝个酒啦，咋农民也就这么点追求，哈哈。
主题：
图片上传，预览，剪切在很多网站上都会使用，可是到自己真正想做的时候，却遇到了各种困难很问题，总算也是完整方案出来啦。分享一下。
表现流程如下：
步骤1：点击浏览按钮选中图片-------1------>onchange事件把图片上传到服务器-------2----->图片路径回传
步骤2：进入切割图片------3----->切割，取得坐标，长度--------4---->传给服务器---------->后台切割产生新图片-----5------>回传新图路径
步骤3：页面截图预览
步骤1：
file标签：
<input name="advImage" id="advImage" type="file" style="height:22px;" onchange="uploadImage()"/>
onchange事件调用的js方法：
ajaxFileUpload利用iframe模拟了ajax上传文件。
url:"uploadPreviewImage.html" 就是后台地址，（本人使用的是spring mvc），
success:function (data , status)，上传成功后调用的js中，$('#photo').imgAreaSelect方法是使用了imgAreaSelect插件来初始化截图界面。
官网地址：http://odyniec.net/projects/imgareaselect/
关于ajaxFileUpload的api可以查看官网，开始的时候我使用的是网上随便下的一个js，发现一直调不同，最后换了官网的，才ok。
function uploadImage(){ // 检查图片格式 var f=document.getElementById("advImage").value; if(!/\.(gif|jpg|jpeg|png|JPG|PNG)$/.test(f)) { alert("图片类型必须是.jpeg,jpg,png中的一种") return false; } // 利用ajaxFileUpload js 插件上传图片 $.ajaxFileUpload({url:"uploadPreviewImage.html", secureuri:false, fileElementId:"advImage", dataType:"json", success:function (data , status) { //上传成功后，直接跳出截图框，使用imgAreaSelect插件 piso = $('#photo').imgAreaSelect({ x1: 0, y1: 0, x2:480 , y2: 520 ,onSelectEnd: preview, resizable: false, instance: true, persistent:true }); // 这个方法是现实一个div，托住截图框 showCutImage(); // 一些变量在页面的隐藏input的设置 document.getElementById("photo").src = data.tempPath; document.getElementById("currentPath").value = data.tempPath; }, error:function (data, status, e) { //alert("图片上传失败,请重新选择图片"); } }); return false; } // 截图选中后调用方法，保存好起始坐标和宽高 function preview(img, selection) { $('#x1').val(selection.x1); $('#y1').val(selection.y1); $('#x2').val(selection.x2); $('#y2').val(selection.y2); $('#w').val(selection.width); $('#h').val(selection.height); }
uploadPreviewImage方法，把文件方法零时文件夹下：
public ModelAndView uploadPreviewImage(HttpServletRequest request, HttpServletResponse response) throws IOException{ User user = (User)request.getSession().getAttribute("user"); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request; MultipartFile image = multipartRequest.getFile("advImage"); response.setCharacterEncoding(BusinessConstants.ENCOD_UTF); response.setHeader("ContentType", "json"); PrintWriter out = response.getWriter(); // 组合零时图片名 String imageName = image.getOriginalFilename(); String file_ext = imageName.substring(imageName.lastIndexOf(BusinessConstants.DOT) + 1); SimpleDateFormat df = new SimpleDateFormat(BusinessConstants.DATE_FORMAT); String tempImageName = user.getId() +BusinessConstants.UNDERLINE + df.format(new Date()) + BusinessConstants.DOT + file_ext; // 存放浏览图片的零时文件路径 File file = new File(request.getSession().getServletContext().getRealPath(BusinessConstants.TEMP_PICTURE_PATH + tempImageName)); byte[] advImageBytes = null; InputStream advImageStream = null; try { file.createNewFile(); advImageStream = image.getInputStream(); advImageBytes = FileCopyUtils.copyToByteArray(advImageStream); FileCopyUtils.copy(advImageBytes, file); advImageStream.close(); } catch (IOException e) { e.printStackTrace(); } String tempPath = BusinessConstants.TEMP_RELATIVE_PICTURE_PATH + tempImageName; // 传给页面相对路径 out.print("{"); out.print("tempPath:'"+tempPath+"',"); out.print("msg:''"); out.print("}"); out.flush(); out.close(); // ajax return null; }
上面的uploadPreviewImage调用完成后就会把下面的div显示出来（初始隐藏）：
这就是截图界面啦！
<div id="cutImageDiv" class="displayCutDiv" > <div id="cutImageShut" class="amend-close">关闭</div> <div style="margin: 0 auto;"><img src="../images/test.jpg" id="photo"onclick="imgAreaSelect();"/> <input id="x1" type="hidden" /> <input id="x2" type="hidden" /> <input id="y1" type="hidden" /> <input id="y2" type="hidden" /> <input id="w" type="hidden" /> <input id="h" type="hidden" /> </div> <input type="button" id="cutImage" name="cutImage" class="btton-queren" onclick="cutImage()" style="float: right;" value="保存"/> </div>
步骤2：
我们可以看到截图完毕后点击保存，就会调用cutImage方法：
里面我们利用dwr调用ReleaseService的cutImage方法。
function cutImage(){ var list = new Array(); list[0] = $("#x1").val(); list[1] = $("#x2").val(); list[2] = $("#y1").val(); list[3] = $("#y2").val(); list[4] = $("#w").val(); list[5] = $("#h").val(); var currentPath = document.getElementById("currentPath").value; // 这里是利用的dwr框架直接调用后台方法，以及使用后台传回的值 // 这个方法就是利用坐标宽高进行切图，事实上这时候的原图已经在服务器了，所以我们只需要知道他的相对路径，即currentPath ReleaseService.cutImage(list, currentPath, function(value){ document.getElementById("currentPath").value = value; } ); var bgObj=document.getElementById("bgDiv"); var msgObj=document.getElementById("cutImageDiv"); bgObj.style.display = msgObj.style.display = "none"; piso.cancelSelection(); haveImage = 1; $('#msHaveImage').show(); //$(".imgareaselect-outer").hide(); //$(".imgareaselect-selection").parent().hide(); }
ReleaseService的cutImage方法：
public String cutImage(int[] size, String path) { int x1 = size[0]; int x2 = size[1]; int y1 = size[2]; int y2 = size[3]; int w = size[4]; int h = size[5]; if(w <= 0) w = 480; if(h<=0) h = 520; if(x1<0) x1 = 0; if(y1<0) y1 = 0; //File file = new File(request.getSession().getServletContext().getRealPath(path)); path = path.substring(2); WebContext ctx = WebContextFactory.get(); User user = (User)ctx.getSession().getAttribute("user"); SimpleDateFormat df = new SimpleDateFormat(BusinessConstants.DATE_FORMAT); String file_ext = path.substring(path.lastIndexOf(BusinessConstants.DOT) + 1); File file = new File(ctx.getSession().getServletContext().getRealPath(path)); String imageName = user.getId() + BusinessConstants.UNDERLINE + df.format(new Date()) + BusinessConstants.DOT + file_ext; String newFile = ctx.getSession().getServletContext().getRealPath(BusinessConstants.TEMP_PICTURE_PATH + imageName); //切图操作 ImageCut.abscut(ctx.getSession().getServletContext().getRealPath(path), newFile, x1, y1, w, h); return BusinessConstants.TEMP_RELATIVE_PICTURE_PATH + imageName; }
来看一下截图方法：主要是Graphics2D的drawImage方法。
public static void abscut(String srcImageFile,String desImageFile, int x, int y,int width, int height) { try { Image img; ImageFilter cropFilter; File srcFile = new File(srcImageFile); //String fileName = srcFile.getName(); String ext = getExtension(srcImageFile); if(ext==null)ext="jpg"; // 读取源图像 BufferedImage bi = ImageIO.read(srcFile); int srcWidth = bi.getWidth(); // 源图宽度 int srcHeight = bi.getHeight(); // 源图高度 if (srcWidth >= width && srcHeight >= height) { BufferedImage tag; Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT); // 四个参数分别为图像起点坐标和宽高 // 即: CropImageFilter(int x,int y,int width,int height) cropFilter = new CropImageFilter(x, y, width, height); img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter)); int type = BufferedImage.TYPE_INT_RGB; if("gif".equalsIgnoreCase(ext)||"png".equalsIgnoreCase(ext)){ type = BufferedImage.TYPE_INT_ARGB; } tag = new BufferedImage(width, height,type); Graphics2D g = (Graphics2D)tag.getGraphics(); g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,RenderingHints.VALUE_INTERPOLATION_BILINEAR); g.drawImage(img, 0, 0, null); // 绘制剪切后的图 g.dispose(); ImageIO.write(tag,ext, new File(desImageFile)); srcFile.delete();//删除原图 } } catch (Exception e) { e.printStackTrace(); } } public static String getExtension(String srcImageFile) { String ext = null; if(srcImageFile!=null && srcImageFile.lastIndexOf(".")>-1){ ext = srcImageFile.substring(srcImageFile.lastIndexOf(".")+1); } return ext; }
步骤3：
至此，截图文件就被保存到指定的文件夹下，相对路径也会被存到数据库中，在页面上的处理就是把需要展现的img转变成src接可以完成了。
补充： 因为以上的流程会导致零时文件夹的废弃文件（比如用户上传了原图，却放弃截图），座椅考虑在linux，上写一个定时脚本，来删除这个零时文件夹下的图片。
一下是遗留问题，希望园子里的朋友能够给一点意见或提示：
问题：
1，使用imgareaselect的时候使用截图框固定的形式，如果原图比这个固定框小，就会出现js错误。是否解决方案？
2，截图程序中利用Graphics2D的drawImage方法来画图，耗时过长，ajax效果的就要延迟体现，无法满足截图后马上显示效果。这个方面不知道怎么改进？
好吧 我不理解园子的朋友指的图是不是这个，姑且认为是效果图吧
上一张剪切图片时候的图片：
有兴趣的帮我解答下我遗留的问题哦，谢啦。
万水千山总是情，也许您可以支持一下，谢谢！
让我们继续前行
----------------------------------------------------------------------
努力不一定成功，但不努力肯定不会成功。
共勉。
