JS仿flash上传头像效果实现代码


Posted in Javascript onJuly 18, 2011

先看效果图(在FF下):

JS仿flash上传头像效果实现代码
下面是我整个的思路:
一、用ajaxFileUpload.js异步上传图片。这个不用多说了,挺简单的东西。
二、div拖拽用jquery-ui。这个也不多说了。
三、上传过图片的处理。

编辑容器是300*300,如果图片不在300*300之内,这里会生成一个maxHeight=300,maxWidth=300的缩略图,
用于设置编辑容器的背景,如果原文件为123.jpg,这里生成的文件为123.jpg.view.jpg,当然,文件123.jpg.view.jpg可能不会生成!
返回数据为{ result:" + result + ",size:" + size + ",msg:\"" + msg + "\",w:" + ww + ",h:" + hh + "}"。
result 是1或0,表是否上传成功,
size 是缩放比率,默认为1,有缩略图时为缩小的倍数,如果缩略到原来的3/4,size为0.75
msg 如果result=1,msg是文件地址,如果result=0,msg是错误信息
w,h是原图的宽高,如果有缩略图,则为缩略图的宽高。
四、选择图片区域

头像目标大小为175*175,编辑时在右边显示。目标头像要随选区的移动而移动,这个可以定位背景要实现,但它还要随选区的大小变化而变化,这个用背景恐怕是难以实现了吧!
反正我是不知道怎么做,所以这里选择用真正的图片,可图片从哪来呢?从服务端来!想必图片验证码大家都熟悉,这里的真正图片就是这样得来的。在选区drag和resize后(当然也可
在进行时请求,效果更动态,不过嘿嘿...),即 stop时要向服务器请求显示的图片,请求数据要包含size,即上面得到的0.75,还有选区的位置和大小。
到服务器后你会发现选区的位置(x,y)和大小(w,h)是针对缩略图的,这时size就有用了,由size缩略,由size还原,真是解玲还需系玲人啊,把x,y,w,h都除以size,得到的位置和大小便对应到原图上了。于是乎,剪切吧!返回吧!好,剪切,返@#!,晕,这里还不能返回呢!因为剪切过后你也不知道大小是不是符合
我们的目标大小(175*175)啊! 所以这里不能急着返回给用户看,还要做最后的包装,把大的压缩,把小的放大,统统成175*175达标后才可返回。于是,
页面上就可以看到我们选区的头像了~
五、确定保存

这里逻辑就简单多了,选择图片区域时我们生成了图片输出到页面,这里我们可以用同样的方法生成图片,保存就OK了,这里还有一个清理操作,
最终的123.jpg是没用的,123.jpg.view.jpg也是没用的,有用的是我们借助123.jpg.view.jpg从132.jpg中抽离出来的456.jpg!
六、整个功能放在一个html里,哪里用,就load到哪里!
js:

$(function() { 
$("#divUp").load("uploadAvatar.htm?n=" + Math.random()); 
}) 
function OnAvatarUploaded(file) { 
$("#img").attr("src", file + "?n=" + Math.random()); //防止缓存 
}

html:
<div style="height: 500px; clear: both; margin: 80px auto; width: 800px;"> 
<div style="width: 175px; height: 175px; float: left; border: 1px solid #ccc;"> 
<img src="" id="img" style="width: 175px; height: 175px" /> 
</div> 
<div id="divUp" style="width: 520px; float: left; margin-left: 20px"> 
</div> 
</div>

*******************
总体思路及步骤到这就完了。
功能没有flash的强大,但一般的上传头像也可以满足了,想生成头像缩略图也很简单,下面会附源码,看一下就知道在哪加了。
handler里代码有点乱,没有整理,不好意思啦!
AvaterUpload_3water.rar
Javascript 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
js中的string.format函数代码
Aug 11 #Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 #Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 #Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 #Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 #Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 #Javascript
js下将字符串当函数执行的方法
Jul 13 #Javascript
You might like
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
Python制作数据导入导出工具
2015/07/31 Python
常用python编程模板汇总
2016/02/12 Python
基于Python闭包及其作用域详解
2017/08/28 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
C有"按引用传递"吗
2016/09/06 面试题
Linux常见面试题
2013/03/18 面试题
北大研究生linux应用求职信
2013/10/29 职场文书
安全生产实施方案
2014/02/23 职场文书
大一新生期末自我评价
2014/09/12 职场文书
客户付款通知书
2015/04/23 职场文书
酒店厨房管理制度
2015/08/06 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python