Question

我正在尝试为我的网站添加一个裁剪图像系统。我已经下载了the jQuery plugin来裁剪图像。

一切正常。可以裁剪图像并将其发送到其目录，并且可以将其保存在数据库中，问题是裁剪并移动到该文件夹后，它变成了黑色。我不知道为什么会这样。

这是我的jQuery代码

$image_crop = $("#image_demo").croppie({
        enableExif:true,
        viewport:{
            width:200,
            height:200,
            type:'square'
        },
        boundary:
        {
            width:300,
            height:300
        }
    });



    $('#profile_image_id').on('change',function(){
        var reader = new FileReader();
        reader.onload = function(event){
        $image_crop.croppie('bind',{
            url:event.target.result
        }).then(function(){
            console.log('jquery bind complete');
        });
        }
        reader.readAsDataURL(this.files[0]);
        $('#modal-profile_pic').modal('show');
    });

    $('.crop_image').click(function(event){
        $image_crop.croppie('result',{
            type:'canvas',
            size:'viewport'
        }).then(function(response){

            $.ajax({
                url:"php/userUpdateData.php",
                method:"POST",
                data:{
                    'cropped_image':response
                },success:function(data){
                    $('#modal-profile_pic').modal('hide');
                    $("#profilePicture").html(data);

                }
            });


        })
    });

这是我的PHP代码

if(isset($_POST['cropped_image']))
{
    $imgInfo = $_POST['cropped_image'];
    $imagesPlaces = 'images/'.basename($imgInfo);
    $checkImage = getimagesize($imgInfo);

    if(!$checkImage)
    {
        echo 'it\'s not an image';
    }else
    {
        $image_expl_get = explode(';',$imgInfo);
        $second_image_expl_get = explode(',',$image_expl_get[1]);
        $image_after_codes = base64_decode($second_image_expl_get[1]);
        $profile_pic_name_new = bin2hex(random_bytes(64)).'.png';



         $send = file_put_contents('../user-img/'.$profile_pic_name_new,$image_after_codes);


        $update_my_page_profile_pic = "UPDATE funnylasndusertable SET user_profile_image='$profile_pic_name_new'
        WHERE username='$user_username'";
        $upload_new_private_image = mysqli_query($connect,$update_my_page_profile_pic);




        if($upload_new_private_image)
        {
            if($send)
            {
                echo "<img id='user_pro_pic' class='user_pro_image' src='user-img/$profile_pic_name_new' />";
            }else
            {
                echo 'couldn\'t send the file';
            }


        }else
        {
            echo 'there was an error in uploading image';
        }



    }

另一个问题是有关范围滑块的。太敏感了！如果我稍稍移动一点，裁剪器就会放大很多。我在croppie.css中发现它的类名是“ cr-slider”，并且在607行的croppie.js中有它的代码，但是我找不到改变其值并使它更平滑移动的方法。

裁剪后图像变黑

0 个答案: