web头像上传 裁剪 剪切功能

 

 

 

 

 

 

1、首先安装ImageMagick-6.3.7-Q16

2、上传路径修改：1、avtar.js         65行   upload 
                          2、crop.jsp        26行
                          3、crop.jsp        78行
                          4、savefile.jsp   55行

3、服务器端图片处理：crop.jsp  36行 String cmd = "C:\\Tools\\ImageMagick-6.3.7-Q16\\convert ";

4、图片裁剪大小修改：crop.jsp  43行  cmd += " -quality 100 -crop 120x120!";

5、改变预览头像大小：my.css    35行  #preDiv

6、改变中间方块大小：my.css    26行  #wrap #shadow  width:120px;  height:120px;

 

 

7、修改cropPic()方法使用iframe提交

 

function cropPic() {
	var frm = $('uploadFrm');
	frm.action = './crop.jsp';
	//frm.target = '_blank';
	frm.target = 'upload_iframe';




	frm.encoding = 'application/x-www-form-urlencoded';
	$('top').value = parseInt(top) - (PICHEIGHT / 2);
	$('left').value = parseInt(left) - (PICWIDTH / 2);
	$('rate').value = latestRate;
	//alert('');
	frm.submit();
}

 

8、修改crop.jsp页面，调用父窗体方法aa传回裁剪完图片名称

 

<script>
 window.parent.aa('"/upload/"+resultPicName%>');
</script>

评论

5 楼 fackyou200 2013-05-13  

NeverStoping 写道

不错，就是要自己再花点时间改改..!

呵呵，对半成品，我当时用也是自己手动修改的。

4 楼 NeverStoping 2013-05-10  

不错，就是要自己再花点时间改改..!

3 楼 shuikai1212 2012-08-21  

ImageMagick  不顶不行

2 楼 xiaoxu_jmtl 2012-05-29  

jinchishuxue 写道

这兄弟帅呆了！项目中正好要加这样一个功能。多谢了。

哥们你用了没问题麽

1 楼 jinchishuxue 2012-03-28  

这兄弟帅呆了！项目中正好要加这样一个功能。多谢了。