FeiYan

网站导航

搜索

腾讯微博 新浪微博 FeelBLog 开源中国社区

PHP+jQuery+jCrop在线裁剪头像

2013-01-21 11:41:11     24个评论     19729次访问

2013年第一文:去年三个项目中使用到了在线剪裁头像,其中一个因为和Ucenter打通的,所以直接使用了Discuz那套Flash为主的头像上传裁剪功能。另外两个项目使用了我自己拼凑的一套PHP+jQuery+jCrop在线裁剪头像源码。

源码里面使用到两个开源的jQuery插件:其一是Ajax上传用的是uploadify,这个上传插件比较牛逼,并且可以自定义的东西也比较多,demo里面我用的不完善,没有把项目里面用到的取消上传和删除功能加上,同样也可以使用其他不需要使用Flash的jQuery上传插件。其二是jQuery jCrop,用于裁剪已经上传好的图片。

在线演示:http://www.feiyan.info/demo/avatar


服务端我写了3个PHP文件,config.inc.php包含两个公共函数,唯一一个可以需要配置的是上传后的图片会被压缩为宽高不超过500px(默认)的小图后再供前台调用,因为如果用户上传比较大的图片的话不仅仅要占用比较多的存储空间,大图裁剪还会给服务器带来额外的压力。

function resize( $ori ){
    if( preg_match('/^http:\/\/[a-zA-Z0-9]+/', $ori ) ){
        return $ori;
    }
    $info = getImageInfo( ROOT_PATH . $ori );
    if( $info ){
        //上传图片后切割的最大宽度和高度
        $width = 500;
        $height = 500;
        $scrimg = ROOT_PATH . $ori;
        if( $info['type']=='jpg' || $info['type']=='jpeg' ){
            $im = imagecreatefromjpeg( $scrimg );
        }
        if( $info['type']=='gif' ){
            $im = imagecreatefromgif( $scrimg );
        }
        if( $info['type']=='png' ){
            $im = imagecreatefrompng( $scrimg );
        }
        if( $info['width']<=$width && $info['height']<=$height ){
            return;
        } else {
            if( $info['width'] > $info['height'] ){
                $height = intval( $info['height']/($info['width']/$width) );
            } else {
                $width = intval( $info['width']/($info['height']/$height) );
            }
        }
        $newimg = imagecreatetruecolor( $width, $height );
        imagecopyresampled( $newimg, $im, 0, 0, 0, 0, $width, $height, $info['width'], $info['height'] );
        imagejpeg( $newimg, ROOT_PATH . $ori );
        imagedestroy( $im );
    }
    return;
}

另外两个文件upload.php和resize.php分别用于前端Ajax请求图片的上传和裁剪。需要说明的是在resize.php会把第一步上传压缩好的图片裁剪后复制为N张图片,用于生成不同大小的头像,如果需求只需要一张图片,并且不需要保留原图的,直接在原图上修改即可,这样会节省很多资源。最好强调:图片处理使用GD库,不过推荐使用imagick。

源码下载:avatar.zip

文章标签: php  jquery  jcrop  头像 

本文地址:PHP+jQuery+jCrop在线裁剪头像

相关文章

2009-08-20:常用PHP类建站程序和源码

2009-11-06:PHP中出现Notice: Undefined index的三种解决办法

2011-01-09:PHP转换IP地址到真实地址

2011-11-03:PHP转换汉字拼音和Unicode

2011-11-29:EditPlus 3.x 配置PHP开发环境

2012-08-17:用PHP开发一个自己的博客

2012-09-03:高性能网站架构基础篇

2012-09-17:常用PHP正则表达式

2012-09-17:Ubuntu编译Yaf

2012-09-19:使用Pecl或Pear安装PHP扩展

24 Comments »

  1. SpecsSpecs
    不错~~

    2014-09-25 17:46:46   

  2. zhyzhy
    我也遇到这个问题 不知道是swf 、jcrop 、 uploadify 还是浏览器缓存

    @wsbnd9: 当第一次上传成功之后 第二次上传图片,编辑图片的那张图片还是上一次的图片 但是真实的图片变了 估计是浏览器缓存住图片了 问下 有什么办法解决么

    2014-08-07 14:21:43   

  3. 心魔心魔
    下载后,在IE浏览器下无法正常使用,会出现脚本错误。这是一款好工具,为方便大家使用,现将解决办法说出来,在调试的html页面上,给所有input用<form>标签包起来,将不再报错,兼容IE

    2014-06-30 14:32:14   

  4. 飞晏飞晏
    修改uploadify设置

    @bug: 当选择一张图片上传后,觉得不满意想换一张,换不了啊?求解答

    2014-05-06 10:28:18   

  5. 飞晏飞晏
    js配置里面可以修改

    @aTool: 只能是正方形?不能长方形?

    2014-05-06 10:27:38   

  6. aToolaTool
    只能是正方形?不能长方形?

    2013-12-22 13:31:47   

  7. wsbnd9wsbnd9
    当第一次上传成功之后 第二次上传图片,编辑图片的那张图片还是上一次的图片 但是真实的图片变了 估计是浏览器缓存住图片了 问下 有什么办法解决么

    2013-12-14 14:39:47   

  8. bugbug
    当选择一张图片上传后,觉得不满意想换一张,换不了啊?求解答

    2013-12-05 14:13:47   

  9. 梦里追逐梦里追逐
    其实我用的就是你的,呵呵 原模原样的拷贝,哎

    @飞晏: 你可以直接把我这个拿去用...// @梦里追逐: 这个问题解决了,结果又出现问题了,拖拽选择框时 IE10 直接死掉了 而且还不报错。 你的这个demo ie grome ff都没问题啊 羡慕死了// @飞晏: 用IE的开发者工具(F12)看你的报错的具体位置// @梦里追组: 您好,我按照你的demo做了一遍,发现在IE下 不兼容 报不支持对象或属性。为什么你的在IE下 就没有问题呢?

    2013-09-07 23:09:37   

  10. 飞晏飞晏
    你可以直接把我这个拿去用...

    @梦里追逐: 这个问题解决了,结果又出现问题了,拖拽选择框时 IE10 直接死掉了 而且还不报错。 你的这个demo ie grome ff都没问题啊 羡慕死了// @飞晏: 用IE的开发者工具(F12)看你的报错的具体位置// @梦里追组: 您好,我按照你的demo做了一遍,发现在IE下 不兼容 报不支持对象或属性。为什么你的在IE下 就没有问题呢?

    2013-09-03 14:13:47   

  11. 梦里追逐梦里追逐
    这个问题解决了,结果又出现问题了,拖拽选择框时 IE10 直接死掉了 而且还不报错。 你的这个demo ie grome ff都没问题啊 羡慕死了

    @飞晏: 用IE的开发者工具(F12)看你的报错的具体位置// @梦里追组: 您好,我按照你的demo做了一遍,发现在IE下 不兼容 报不支持对象或属性。为什么你的在IE下 就没有问题呢?

    2013-09-02 21:38:31   

  12. 是非心是非心
    360浏览器好像有点问题。不能栽切。

    2013-09-02 10:47:32   

  13. 飞晏飞晏
    用IE的开发者工具(F12)看你的报错的具体位置

    @梦里追组: 您好,我按照你的demo做了一遍,发现在IE下 不兼容 报不支持对象或属性。为什么你的在IE下 就没有问题呢?

    2013-09-02 10:28:27   

  14. 梦里追组梦里追组
    您好,我按照你的demo做了一遍,发现在IE下 不兼容 报不支持对象或属性。为什么你的在IE下 就没有问题呢?

    2013-09-01 10:24:32   

  15. rollomrollom
    很牛X,很技术啊~

    2013-08-16 08:11:31   

  16. 前端开发前端开发
    谢谢分享

    2013-03-17 21:57:05   

  17. 包菜兄包菜兄
    这个不错呀。

    2013-02-27 17:09:54   

  18. 飞晏飞晏
    我还希望有人上传XX图呢,不过这个演示的图片名称就一个,后来的会覆盖之前的,所有就一张图,没事。

    @天涯PHP博客: 不过你这个带截图,好玩哈哈。不怕有人上传色图么演示地址,哈哈哈。

    2013-01-28 11:23:29   

  19. 飞晏飞晏
    swfupload我觉得不合适,抽空公司的项目我也干掉它。

    @天涯PHP博客: 我前段时间折腾过swfupload,还行,但是样式感觉不太美观,又不想自己去折腾。

    2013-01-28 11:22:34   

  20. 天涯PHP博客天涯PHP博客
    不过你这个带截图,好玩哈哈。不怕有人上传色图么演示地址,哈哈哈。

    2013-01-28 09:44:33   

  21. 天涯PHP博客天涯PHP博客
    我前段时间折腾过swfupload,还行,但是样式感觉不太美观,又不想自己去折腾。

    2013-01-28 09:43:22   

  22. 影子哥影子哥
    飞总牛X了,写的都是哥需要的

    2013-01-24 13:11:21   

  23. 所谓刚子所谓刚子
    现在真是越来越技术了啊。。哈哈

    2013-01-21 19:40:48   

  24. 灰狼灰狼
    试了下,很不错~~~~

    2013-01-21 15:07:35   

发布评论

最新评论

  1. SpecsSpecs

    不错~~

  2. zhyzhy

    我也遇到这个问题 不知道是swf 、jcrop 、 uploadify 还是浏览器缓存

  3. java开发java开发

    您好!我按你的源码进行了编,能正常运行,但是我们项目是由java开发的,怎么做才能将生成的一个可执行文件?我想把这个文件放到服务器上直接运行,不想安装~