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 相关文章推荐
JavaScript获得选中文本内容的方法
Dec 02 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
JavaScript手机振动API
Jun 11 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
vue.js实现简单购物车功能
May 30 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php header Content-Type类型小结
2011/07/03 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
python实现保存网页到本地示例
2014/03/16 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
python实现图像识别功能
2018/01/29 Python
详解Django中间件执行顺序
2018/07/16 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
生物科学专业职业规划书范文
2014/02/11 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
地陪导游欢迎词
2015/01/26 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL