`
fackyou200
  • 浏览: 308549 次
  • 性别: Icon_minigender_1
  • 来自: 山西太原
社区版块
存档分类
最新评论

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>
  • 大小: 25.8 KB
  • 大小: 37 KB
分享到:
评论
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  
这兄弟帅呆了!项目中正好要加这样一个功能。多谢了。

相关推荐

    web剪切处理头像并上传

    在头像上传场景中,Flash可以提供跨浏览器的文件选择和上传功能,同时还能处理图像的裁剪操作。 1. **Flash头像上传组件**:在前端,开发者通常会创建一个自定义的Flash组件,该组件包含一个图像预览区域和一个选择...

    php+js实现会员头像上传剪切功能

    这个功能可以让用户上传个人照片,然后根据预设尺寸进行裁剪,确保头像符合系统要求。同时,它还支持通过视频拍摄获取头像,为用户提供更多的选择。 首先,我们要了解PHP的角色。PHP是一种服务器端脚本语言,常用于...

    头像剪切上传jquery+java源码

    在IT行业中,头像剪切上传功能是许多网站和应用中的常见需求,它允许用户选择并裁剪自己的图片作为个人头像。这个"头像剪切上传jquery+java源码"是一个实现这一功能的示例项目,包含了前端的jQuery交互和后端的Java...

    头像上传和剪切

    考虑到用户体验,头像裁剪通常会提供预览功能,用户可以在裁剪前看到效果。这可以通过创建一个额外的Canvas元素,将裁剪区域的图像数据复制过来,或者利用CSS的clip属性实现。 在安全性方面,由于涉及到用户上传的...

    .Net 头像上传 剪切,缩放 JS 版+Flash版 各一枚

    在压缩包子文件的文件名中,"BitmapCutter"可能是JavaScript版本的图像裁剪工具,它可能包含JavaScript代码、CSS样式和HTML模板等,用于实现客户端的头像裁剪功能。而"Avatar"可能代表的是整个头像上传系统的文件夹...

    web开发实例,上传头像和剪切图片

    在Web开发中,创建一个能够上传头像并进行剪切的功能是常见的需求,尤其是在社交网络、个人资料编辑等场景。本实例将详细讲解如何利用ASP和C#编写一个Web程序来实现这一功能,并且借助Ajax技术实现无刷新的用户体验...

    PHP实例开发源码—PHP头像上传预览剪切组件.zip

    在本资源包“PHP实例开发源码—PHP头像上传预览剪切组件.zip”中,包含了一个PHP实现的头像上传与预览剪切功能的组件。这个组件对于需要在网站或应用中提供用户自定义头像服务的开发者来说非常实用。下面将详细介绍...

    Java 实现头像的剪切和上传功能

    在Java开发中,头像的剪切和上传功能是一项常见的需求,特别是在Web应用中,比如社交网络、用户注册等场景。本教程将详细介绍如何使用Java技术栈,结合jQuery ImgCrop库,来实现这一功能。 首先,我们需要理解头像...

    仿新浪微博上传头像功能,头像上传组件,在线头像上传,在线拍摄头像

    - `face.swf`:SWF文件是Adobe Flash的格式,可能是一个旧版的头像裁剪工具,使用Flash技术实现。 - `使用前请看下.txt`:这是一个文本文件,很可能包含了使用组件前需要注意的事项或指南。 5. **前端技术**:...

    基于PHP的头像上传预览剪切组件源码.zip

    【标题】"基于PHP的头像上传预览剪切组件源码"是一个专门设计用于处理用户头像上传和预览的程序,它结合了图片处理技术与PHP编程语言,为Web应用提供了便捷的用户界面和后台处理逻辑。该组件允许用户在上传头像时...

    基于PHP的头像上传预览剪切组件.zip

    【标题】"基于PHP的头像上传预览剪切组件" 涉及的主要知识点是PHP编程中的图像处理技术,通常包括文件上传、图像预览和图像裁剪功能。这样的组件在用户界面设计中十分常见,例如在社交媒体、论坛或者个人资料设置中...

    上传头像图片带预览剪切JAVA版-兼容所有浏览器.zip

    "上传头像图片带预览剪切JAVA版-兼容所有浏览器"是一个典型的Web应用功能,它允许用户选择并预览图片,然后进行剪切操作,最终上传作为自己的头像。这个功能在社交网络、论坛、个人资料编辑等场景中非常常见。下面将...

    html5(上传头像剪切).rar

    HTML5是一种先进的网页标准,它在传统HTML的基础上引入了许多新的特性和功能,极大地提升了Web开发的效率和...通过这些技术,开发者可以构建出一个用户友好且功能丰富的头像上传剪切功能,增强网站或应用的交互体验。

    onethink 头像剪切上传

    总结,Onethink头像剪切上传功能的实现涉及前端图像选择、剪切、压缩以及后端接收、处理和存储等多个环节,每个环节都需要考虑到用户体验、数据安全和性能优化。理解这些知识点有助于开发者更好地实现类似功能,提升...

    jquery上传头像图片剪切

    总的来说,"jquery上传头像图片剪切"涉及到前端的jQuery和JavaScript技术,以及后端的Java处理,通过这种方式,我们可以提供一个高效、安全且用户友好的头像上传和剪切功能。这个过程中涉及到的技术和实践对于Web...

    qq头像上传

    最后,用户体验是QQ头像上传功能成功与否的关键。这意味着界面需要直观易用,上传速度快,反馈及时。为了优化性能,可以采用分块上传大文件,或者利用CDN加速图片传输。 总结来说,QQ头像上传涉及到前端的图片选取...

    图片选择器,头像上传

    头像上传功能让用户可以从设备中选取或拍摄新图片,并将其作为自己的头像。这个过程可能包括以下步骤: 1. 图片裁剪:为了适应应用的头像尺寸要求,通常会提供一个裁剪工具。这个工具允许用户按照预设比例或自由...

    纯html手机端类似微信上传头像功能

    本示例所涉及的主题是“纯html手机端类似微信上传头像功能”,这是一个用于实现类似微信头像上传、预览和剪切功能的HTML示例。这种功能常见于许多社交应用和个人资料设置中,为用户提供方便快捷的图像编辑体验。 ...

    java上传并裁剪图片

    在Java编程中,上传并裁剪图片是一项常见的需求,尤其在Web应用中,例如用户头像设置、商品图片处理等场景。本篇文章将详细介绍如何在Java环境中实现这一功能。 首先,图片上传通常涉及到客户端(如浏览器)与...

    7个头像上传插件 PHP

    4. "会员头像上传.zip" - 这个可能是专为会员系统设计的头像上传功能,可能包含了用户认证和权限控制的逻辑。 5. "php%2Bjs实现会员头像上传剪切功能.zip" - 这个示例可能不仅包含上传,还实现了图片裁剪功能,用户...

Global site tag (gtag.js) - Google Analytics