这是我的决心：

下载并解压缩JCrop 并解压缩jquery.Jcrop.min.js &；jquery.Jcrop.css 到js &；css 子目录分别位于主题模板目录下header.php 就在之前</head> （如果已经包含了jquery.min.js 在另一个地方）：

<script src="<?php echo get_template_directory_uri().\'/js/jquery.min.js\'; ?>"></script>
<script src="<?php echo get_template_directory_uri().\'/js/jquery.Jcrop.min.js\'; ?>"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri().\'/css/jquery.Jcrop.css\'; ?>" type="text/css" />

将以下代码以php文件的形式放入（我还放入了内联css）：

<input name="userImg" type="file" accept=".jpg,.jpeg,.png,.gif" size="25" />
<img id="testImg" alt="your image" style="display:none;" />                 
<input type="button" id="btnCrop" value="Crop" 
     style="display:none; float:left; clear:both; margin-top:10px; margin-bottom: 10px" />

<label name="canvas" for="canvas" 
     style="float:left; clear:both; display:none; margin-bottom:5px">
     <?php _e(\'Preview the cropped image\', \'usp\'); ?></label>
<canvas id="canvas" height="1" width="1" 
     style="float:left; clear:both; max-width:400px; max-height:400px" ></canvas>

<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />

<input type="hidden" name="imgCropped" id="imgCropped" />    

将以下代码放在jquery js主文件中（我使用canvas):

$("input[name=\'userImg\']").change(function () {
    $(\'#testImg\').hide();
    if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
            $(\'#testImg\').show();
            $(\'#testImg\').attr( "src", e.target.result );               
            $(\'#testImg\').on( \'load\', function() { 
                var jcrop_api;
                if ( $(this).width() > $(this).height() )
                {
                    $(\'#testImg\').Jcrop({
                        onChange: SetCoordinates,
                        onSelect: SetCoordinates,
                        aspectRatio: 7/5,
                        boxWidth: 700,
                        boxHeight: 500
                    }, function(){
                        jcrop_api = this;
                        var dim = jcrop_api.getBounds();
                        jcrop_api.setSelect([0, 0, dim[0], dim[1]]);
                    });
                }
                else
                {
                    $(\'#testImg\').Jcrop({
                        onChange: SetCoordinates,
                        onSelect: SetCoordinates,
                        aspectRatio: 5/7,
                        boxWidth: 500,
                        boxHeight: 700
                    }, function(){
                        jcrop_api = this;
                        var dim = jcrop_api.getBounds();                
                        jcrop_api.setSelect([0, 0, dim[0], dim[1]]);            
                    });         
                }   
            });
        };
        FR.readAsDataURL( this.files[0] );

        $(\'#btnCrop\').click(function () {                               
            var canvas = $("#canvas")[0];
            var context = canvas.getContext("2d");
            var img = new Image();
            img.src = $(\'#testImg\').attr("src");
            img.onload = function () {              
                $img = $(\'#testImg\');
                imgW = img.width,
                imgH = img.height;      

                var ratioY = imgH / $img.height(),
                    ratioX = imgW / $img.width();

                var getX = $(\'#imgX1\').val() * ratioX,
                    getY = $(\'#imgY1\').val() * ratioY,
                    getWidth = $(\'#imgWidth\').val() * ratioX,
                    getHeight = $(\'#imgHeight\').val() * ratioY;

                canvas.height = getHeight;
                canvas.width = getWidth;                    
                context.drawImage(img,getX,getY,getWidth,getHeight,0,0,getWidth,getHeight);
                $("label[name=\'canvas\']").show();
                $(\'#imgCropped\').val(canvas.toDataURL(\'image/jpeg\'));           
            };      
        }); 
        function SetCoordinates(c) {
            $(\'#imgX1\').val(c.x );
            $(\'#imgY1\').val(c.y );
            $(\'#imgWidth\').val(c.w );
            $(\'#imgHeight\').val(c.h );  
            $(\'#btnCrop\').show();
        };          
    }
});         

参考文献：

1. Getting file width and height with file api
2. Cropping images in the browser before the upload
3. Crop and Upload Image with Thumbnail using jQuery and HTML5 in ASPNet
4. Jcrop have problems with large size images
5. Crop and show result with canvas