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

先看渲染(FF下):。

以下是我的整个思路：第一，用ajaxFileUpload.js异步上传图片不用说，这是一件简单的事情。第二，使用jquery-ui进行div拖动。这个我就不多说了。三、上传图片的处理。编辑容器是300*300。如果图片不在300*300以内，这里会生成一个maxHeight=300，maxWidth=300的缩略图，用来设置编辑容器的背景。如果原始文件是123.jpg，那么这里生成的文件就是123.jpg.view.jpg。当然，文件123.jpg.view.jpg可能不会生成！返回的数据为{result:' result '，size:' size '，msg3360 \'' msg' \ '，w:' ww '，h:' hh'}。是结果1还是0，表是否上传成功，大小是缩放比例，默认值是1，如果有缩略图，就是缩小倍数。如果缩短到原来大小的3/4，大小就是0.75 msg。如果result=1，msg是文件地址，如果result=0，msg是错误消息w，h是原始图像的宽度和高度，如果有缩略图，则是缩略图的宽度和高度。4.在图片区选择头像的目标尺寸为175*175，编辑时显示在右侧。目标头像应该随着选区的移动而移动，这种可定位的背景应该实现，但也应该随着选区的大小而变化。这个背景恐怕很难实现！反正我也不知道怎么做，所以选择在这里用真实的图片，但是图片从哪里来呢？来自服务器！想必大家对图片验证码都很熟悉，这里的真实图片就是这样获得的。选择后拖动并调整大小(当然也可以在进行中请求，效果更动态，不过呵呵.)，即停止时，需要请求服务器显示图片，请求的数据应该包括大小，即上面得到的0.75，以及选择的位置和大小。当你到达服务器时，你会发现选区的位置(x，y)和大小(w，h)是针对缩略图的。此时，大小是有用的，它通过大小来缩写，并通过大小来恢复。绑凌人真的很有必要。将x、y、w、h除以Size，得到的位置和尿液与原图对应。所以，切了它！回去！好了，切回去@ #！晕，这里也回不去了！因为裁剪后，你不知道尺寸是否符合我们的目标尺寸(175*175)！所以不能急着退给用户，要做最后的包装，大的压缩，小的放大，达到175*175的标准后再退。然后，我们选区的负责人可以在第5页看到。在这里确认储蓄的逻辑要简单得多。选择图片区域时，我们生成图片并输出到页面。这里我们可以用同样的方法生成图片，保存就可以了。这里还有一个清理行动。最后，123.jpg没用，123.jpg.view.jpg也没用。有用的是456.jpg，我们在123.jpg.view.jpg的帮助下从132.jpg提取的！六、整个功能在一个html中，在哪里使用，在哪里加载！Js:复制代码如下： $ (function () {$ ('# divup ')。load ('uploadavatar.htm？n=' math . random())；})函数OnAvatarUploaded(file) { $('#img ')。attr('src '，文件'？n=' math . random())；//防止缓存} html:复制代码如下： div style=' height : 500 px；clear:两者；margin: 80px自动；宽度： 800 px；div style=' width: 175px高度： 175 px；向左浮动：border: 1px固体# cccimg src=' http : ' id=' img ' style=' width : 175 px；height : 175 px '/div div id=' Divup ' style=' width : 520 px；向左浮动：margin-left : 20px '/div/div * * * * * * * * * * * * * * * * *整体思路和步骤结束。功能没有flash强大，但是一般的头像上传就可以满足了。生成头像的缩略图也很简单。源代码会附在下面，看完就知道往哪里加了。处理程序中的代码有点乱，没有整理出来，不好意思！AvaterUpload_jb51.rar