带领大家一起做一个ThinkPHP整合jcrop图片上传裁切预览的例子

博客已转移：PHP上传裁切

   发现经常有人在技术群里问要PHP图片上传裁切并且预览的例子。今天正好有时间，就亲自做了一个，同时把方法公布出来，让大家可以理解，学会如何用ThinkPHP+jcrop做这个例子。首先先下来jcrop,网址：http://deepliquid.com/content/Jcrop_Download.html

   下载完成后，里面有js，demo，css等文件夹.demo里是例子,建议大家先看一下源代码.剩下的,跟我一起来做这个例子:

   1.下载ThinkPHP,然后新建项目,生成项目目录

   2.在Tpl中新建Index/index.html

代码如下

 



  
    
         请选择上传的图片
              
             上传图片

        
    
  

这是一个上传，在点击上传图片以后，会弹出一个窗口，专门用来上传图片裁切。在Tpl/Index/下新建upimg.html

代码如下:

    function $(id){
        return document.getElementById(id);
    }
    function ok(){
         $("logoimg").src = $("filename").value;
     }




  
    
         请选择上传的图片
            
            
            
            
        
    
  

我没有用TP自带的文件上传类，如果大家需要，可以改下，以上主要就是弹出一个上传文件的窗口，在这个窗口中会完成文件上传，裁切等操作。点击提交到Index/uploadf

Index/uploadf代码如下：

$path = "uploadfiles/";         //图片上传地址
                if (! file_exists ( $path )) {
                    mkdir ( "$path", 0700 );
                }
                $tp = array (
                        "image/gif",
                        "image/jpeg",
                        "image/png",
                        "image/jpg"
                );
                                                                                                                                                                                                                                             
                if (! in_array ( $_FILES ["filename"] ["type"], $tp )) {
                    echo "格式不对";
                    exit ();
                } // END IF
                                                                                                                                                                                                                                             
                if ($_FILES ["filename"] ["name"]) {
                    $file1 = $_FILES ["filename"] ["name"];
                    $file2 = $path . time () . $file1;
                    $flag = 1;
                }
                                                                                                                                                                                                                                             
                if ($flag)
                    $result = move_uploaded_file ( $_FILES ["filename"] ["tmp_name"], $file2 );
                if ($result) {
                                                                                                                                                                                                                                         
                    $this->assign('filename',$file2);
                    $this->display();
                }

上传完成以后会直接跳转到uploadf.html

    jQuery(function($) {
        var jcrop_api, boundx, boundy,
        $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'),
        xsize = $pcnt.width(), ysize = $pcnt.height();
        console.log('init', [ xsize, ysize ]);
        $('#target').Jcrop({
            onChange : updatePreview,
            onSelect : updatePreview,
            aspectRatio : xsize / ysize
        }, function() {
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            jcrop_api = this;
            $preview.appendTo(jcrop_api.ui.holder);
        });
        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $pimg.css({
                    width : Math.round(rx * boundx) + 'px',
                    height : Math.round(ry * boundy) + 'px',
                    marginLeft : '-' + Math.round(rx * c.x) + 'px',
                    marginTop : '-' + Math.round(ry * c.y) + 'px'
                });
                                                                                                                                                                                                                                   
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            }
        }
        ;
        function updateCoords(c){
                                                                                                                                                                                                                                   
            };
                                                                                                                                                                                                                               
    });


.jcrop-holder #preview-pane {
    display: block;
    position: absolute;
    z-index: 2000;
    top: 10px;
    right: -240px;
    padding: 6px;
    border: 1px rgba(0, 0, 0, .4) solid;
    background-color: white;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#preview-pane .preview-container {
    width: 170px;
    height: 250px;
    overflow: hidden;
}