技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > html/html5 > 正文

html5移动开发做头像上传功能,可裁剪(现用jcrop)

来源: 技术CTO 阅读:

 现在用jscrop裁剪有问题,

有没做过的,有实现的demo可以参考下的  
2、selectfile.jsp的代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="utf-8"%>
   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<script type="text/javascript">
  jQuery(function($){
 var jcrop_api,
        boundx,
        boundy,
        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img');
    $('#srcImg').Jcrop({
      aspectRatio:1,
   onChange:showCoords,
   onSelect:showCoords,
   minSize:[200,200]
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;
      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });
 function showCoords(obj){
  $("#x").val(obj.x);
  $("#y").val(obj.y);
  $("#w").val(obj.w);
  $("#h").val(obj.h);
  if(parseInt(obj.w)>0){
    //计算预览区域图片缩放的比例,通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到   
               var rx = 200 / obj.w;  
               var ry = 200 / obj.h;  
                //通过比例值控制图片的样式与显示   
               $('#preview-pane .preview-container img').css( {  
                  width : Math.round(rx * $("#srcImg").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积  
                    height : Math.round(ry* $("#srcImg").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积  
                    marginLeft : "-" + Math.round(rx * obj.x) + "px",  
                    marginTop : "-" + Math.round(ry * obj.y) + "px"  
               });
  }
  }
  });
  function changeImg(){
  document.forms[0].submit();
  }
 
</script>
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -280px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
 /* background-color: white;*/
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#preview-pane .preview-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="cache-control" content="no-cache">
<title>top</title>
</head>
<body>&nbsp; 
  
 获取图片:  
  <div id="cutImage" >
  <div class="bigImg" >    
     <form action="<%=request.getContextPath() %>/upload" method="post" enctype="multipart/form-data">
  上传文件:<input type="file" name="file1" id="sf" onchange="changeImg();"/><br/>
  <!-- <input type="submit" value="提交"><br/> -->
 </form>
 <% 
 String path=(String)request.getSession().getAttribute("imageUrl");
 if(path!=null){
 out.println(path);
 %> 
 <img alt="\" src="<%=path %>" width="30%" height="30%" id="srcImg" >
 <div id="preview-pane">
    <div class="preview-container">
      <img src="<%=path %>" class="jcrop-preview" alt="Preview" />
     
    </div>
    </div>
 <%
 }
  %> 
  </div> 
    </div>
     <form action="<%=request.getContextPath() %>/UpdatePhoto" method="post" name="crop_form" >
  <input type="hidden" id="bigImg" name="bigImage" value="<%=path %>"/>
  <input type="hidden" id="x" name="x" />
  <input type="hidden" id="y" name="y" />
  <input type="hidden" id="w" name="w" />
  <input type="hidden" id="h" name="h" />
  <p><input type="submit" value="保存" id="crop_submit" /></p>
 </form>
  预览图片:
    <%
    String str=(String)request.getParameter("url");
    out.print(str); 
    if(str!=null){
    %>
    <div id="preview_box" class="previewImg"  >
  <img id="previewImg" src="../upload/<%=str %>?tempid=<%=Math.random() %>" name="previewImg"/>
 </div>
    <%
    }
    %>
 
</body>
</html>
3、切割图片的java代码:
package com.jcrop;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;

public class ImageCut {
/***
 * 图片切割
 * @param imagePath 原图地址
 * @param x 目标切片坐标 x轴起点
 * @param y 目标切片坐标 y轴起点
 * @param w 目标切片  宽度
 * @param h 目标切片 高度
 */
 public String cutImage(String imagePath,int x,int y,int w,int h){
  Image img;
  ImageFilter cropFilter;
  
  try {
   //读取源图像
   BufferedImage bi=ImageIO.read(new File(imagePath));
   int srcWidth=bi.getWidth();//原图宽度
   int srcHeight=bi.getHeight();//原图高度
   //若原图大小大于大于切片大小,则进行切割
   if(srcWidth>=w&&srcHeight>=h){
    Image image=bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
//    int x1=x*srcWidth/400;
//    int y1=y*srcHeight/270;
//    int w1=w*srcWidth/400;
//    int h1=h*srcHeight/270;
    int x1=x;
    int y1=y;
    int w1=w;
    int h1=h;
    
    cropFilter=new CropImageFilter(x1,y1,w1,h1);
    img=Toolkit.getDefaultToolkit().createImage(
      new FilteredImageSource(image.getSource(),cropFilter));
    BufferedImage tag=new BufferedImage(w1,h1,BufferedImage.TYPE_INT_BGR);
    Graphics g=tag.getGraphics();
    g.drawImage(img, 0, 0, null);
    g.dispose();
    
    String url=imagePath.substring(0,imagePath.lastIndexOf("\\")+1);
    String name=imagePath.substring(imagePath.lastIndexOf("\\")+1);
    System.out.println(name);
    String[] src=name.split("\\.");
    imagePath=src[0].concat("cut.").concat(src[1]);
    url=url.concat(imagePath);
    System.out.println(imagePath);
    
    ImageIO.write(tag, "JPEG",new File(url) );
    
   }
   
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  return imagePath;
 }
}
4、将生成的图片返回到selectfile.jsp页面的java类
package com.jcrop;
这些功能,主要看你们领导怎么定义。我们一般是图像原图上传,显示的时候,现在制定部位即可。

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^