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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
javascript内存管理详细解析
Nov 11 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
react国际化react-intl的使用
May 06 Javascript
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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
php生成二维码
2015/08/10 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
Django中几种重定向方法
2015/04/28 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
自我评价范文
2013/12/22 职场文书
公司经理任命书
2014/06/05 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
毕业生自荐信范文
2015/03/05 职场文书
大学生自荐书范文
2015/03/05 职场文书