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 FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 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
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python是编译运行的验证方法
2015/01/30 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
IBatis持久层技术
2016/07/18 面试题
精神文明单位申报材料
2014/05/02 职场文书
文明城市标语
2014/06/16 职场文书
安全标兵事迹材料
2014/08/17 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle