使用 Jcrop 形成一个 ajax 加载的图像

Question

我有一个网站，我想使用 ajax 将个人资料图片上传到服务器并将图片存储到数据库中。这很简单，并且确实有效。但我希望能够让用户能够使用 Jcrop 裁剪他们的图像，使其成为正方形。我已经看到并下载了如何实现 Jcrop 的示例，这些示例非常简单。但我只是看不到让它在我的网站上工作。到目前为止我的代码很粗糙，仍然需要一些验证，但我想首先处理 main 函数。 为了让裁剪过程看起来更加用户友好，我创建了一个基本的灯箱类型的东西来保存上传表单，然后在从 php 发回后裁剪图像。这似乎是我在网上看到的唯一区别。

这是我的代码：（我刚刚选择了相关部分，因为该网站在其他不相关的 div 中包含相当多的文本和图像） HTML 导入：

<script src="jquery/jquery.min.js"></script>
<script src="jquery/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

HTML: - 上传新的个人资料图片的表单

<div id="reg_pp">
                <img src="images/logo.png" width="100%" height="150px" /><br/><button id="updateGender" style="float:right; width:auto;" class="form_fields_button" onclick="changeProfilePic('open')">Change Profile Picture</button>
            </div>

HTML: - 灯箱类型的东西

<div id="ppuo" class="overlay">
    <div id="ppufh" class="tcs">
        <div id="close_btn" onclick="changeProfilePic('close')"></div>
        <div id="nppf">
            <div id="preview"><img src="assests/preview.png" width="150px" height="150px" id="thumb" /></div>
            <form id="uploadPP" enctype="multipart/form-data">
                <input id="image" name="image" type="file" class="form_fields" size="20" style="width:100%" />
                <input type="hidden" id="user" name="user" value="session_generated_id"/>
                <div id="npp_err_msg"></div>
                <input type="button" id="changePPBtn" value="preview" onclick="check()"  />
            </form>
        </div>
    </div>
</div>

Javascript：-切换个人资料图片更改对话框/灯箱

function changeProfilePic(toggle){
    var overlay = document.getElementById('ppuo');
    var content = document.getElementById('ppufh');
    if(toggle === 'open'){
        //display overlay
        $('#ppuo').fadeIn({complete:function(){}},500);
    }else{
        //hide display
        $('#ppuo').fadeOut({complete:function(){}},500);
    }
}

JavaScript: - 上传图片并启动 JCrop

function check(){
    var formData = new FormData($('#uploadPP')[0]);
    $.ajax({
        url: 'global.func/upLoadPP.php',
        type: 'POST',
        xhr: function(){
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                //myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        data: formData,
        //Ajax events
        //beforeSend: beforeSendHandler,
        success: function(data){
            var return_type = data.substr(0,1);
            var data_type = data.split(":");
            if(parseInt(data_type[0]) === 4 || data_type[0] === '4'){
                //no error
                $('#ppufh').animate({width:'800px',height:'80%',marginTop:'10%'},500);
                document.getElementById('thumb').src = data_type[1];
                document.getElementById('thumb').style.width = '80%';
                document.getElementById('thumb').style.height = 'auto';
                document.getElementById('ppufh').style.overflow = 'scroll';

                        $('#thumb').JCrop({
                        aspectRatio: 1,
                        onChange: updateCoords,
                        onSelect: updateCoords,
                        bgColor: 'blue',
                        bgOpacity: .5,
                        sideHandles:false,
                        minSize: [ 50, 50 ]
                    });

                document.getElementById('changePPBtn').value = 'Finished Cropping';
                $('#changePPBtn').on('click',function(){
                    window.alert("save new profile pic");
                });
            }else{
                var err_msg = data_type[1];
                document.getElementById('npp_err_msg').innerHTML = '<h3 style="text-align:left">'+data+'</h2>';
            }
        },
        error: function(){
            alert("There has been an internal server error. Please try again.");
        },

        cache: false,
        contentType: false,
        processData: false
    });
}

PHP：-以防万一它有帮助，但作为一个基本的开始工作正常

<?php

include '../constant/connect.php';
$row_count = mysql_num_rows(mysql_query("SELECT * FROM profile_pics"));
if(isset($_POST)){
    $user_email = $_POST['user'];
    $file = $_FILES['image'];
    if($_FILES['image']['error'] > 0){
        echo '0:php server error adjust php.ini file, then change this error message.';
    }else{
        $file_type = $_FILES['image']['type'];
        $file_name = $_FILES['image']['name'];
        $extention = explode('.',$file_name);
        $extention = $extention[1];
        if($extention == 'jpeg' || $extention == 'png' || $extention == 'gif'){
            $path = '../images/user_profile_pictures';
            $new_file_name = md5($file_name.$row_count).".".$extention;
             move_uploaded_file($_FILES["image"]["tmp_name"], "../images/user_profile_pictures/" . $new_file_name);
            $query = mysql_query("INSERT INTO profile_pics (pp_src,pp_owner) VALUES ('".$path."/".$new_file_name."','$user_email')")or die(mysql_error());
             echo '4:images/user_profile_pictures/'.$new_file_name;
        }else{
            echo '1:Wrong type of file, use jpg, jpeg, png or gif. No animated Gifs.';
        }
    }
}else{
    echo 'data not passed';
}
?>

看起来它应该可以工作，但可能有一些我错过了并且无法发现其他人可以发现的东西。因此，如果有人可以提供帮助，将不胜感激。

Answer 1

getElementById('thumb').style.height = 'auto';
                document.getElementById('ppufh').style.overflow = 'scroll';

                        $('#thumb').JCrop({
                        aspectRatio: 1,
                        onChange: updateCoords,
                        onSelect: updateCoords,
                        bgColor: 'blue',
                        bgOpacity: .5,
                        sideHandles:false,
                        minSize: [ 50, 50 ]
                    });

                document.getElementById('changePPBtn').value = 'Finished Cropping';
                $('#changePPBtn').on('click',function(){
                    window.alert("save new profile pic");
                });
            }else{
                var err_msg = data_type[1];
                document.getElementById('npp_err_msg').innerHTML = '<h3 style="text-align:left">'+data+'</h2>';
            }
        },
        error: function(){
            alert("There has been an internal