jcrop.js实现新浪微博头像上传截图功能

作者:林炜贤来源:www.163css.com发表时间:(2012-09-30)

今天我们来介绍一下jcrop.js,它是基于jquery的一个插件,在百度中,大家可以找到许多信息,有一个文章是介绍它的相关参数的“http://www.oschina.net/question/tag/jcrop”,有兴趣的可以看下。

那么,我们今天用它来模仿新浪微博的头像上传功能:

我们可以看到,新浪微博的这个头像截取功能相当强大,有本地照片功能,还有视频照相功能,头像截取后,还可以分三种显示方式,不过,当我右键查看时,原来新浪这个功能是采用FLASH做出来的,看来新浪的FLASH也是非同一般啊。。。

我们没办法像新浪微博那样做得那么强大,但至少我们的jcrop至少也可以实现截图功能啊:

插件里的代码我们就不看了,太复杂了,我们看下如何调用:

我们要裁剪的图片名字为bPic,aspectRatio表示选取的宽高为正方形,showPreview表示我们选择的执行函数。。。各个参数方面,大家有兴趣参考下这个网址“http://www.doc88.com/p-009202342238.html”。

大家在使用这个函数的时候,可能会发现按esc按键的时候,选取框没有消失,一开始我就觉得非常奇怪,后来才发现,鼠标点击选区,选区就会消失,哈哈,真是搞笑。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/10/jcrop/index.html

下载地址:jcrop_js实现新浪微博头像上传截图功能.zip

返回作者主页:www.163css.com阅读 (8580)
更多 1