Javascript Jquery插件裁剪到裁剪图像错误_Javascript_Jquery_Html

Javascript Jquery插件裁剪到裁剪图像错误

javascript jquery html

Javascript Jquery插件裁剪到裁剪图像错误,javascript,jquery,html,Javascript,Jquery,Html,我想在我的网站上使用Jquery Croppie插件为我的用户裁剪图像，但我遇到了这个问题，我编写的代码没有显示为示例这是我的密码 HTML代码 <input type="file" id="upload" value="Choose a file"> <button class="upload-result">Result</button> <div class="upload-msg"> Upload a file to start c

我想在我的网站上使用Jquery Croppie插件为我的用户裁剪图像，但我遇到了这个问题，我编写的代码没有显示为示例

这是我的密码

HTML代码

<input type="file" id="upload" value="Choose a file">
<button class="upload-result">Result</button>
<div class="upload-msg">
   Upload a file to start cropping
</div>
<div id="upload-demo"></div>

注意：我已经用jquery、cropie.js和cropie.css链接了我的网站，试试看，它对我很有用。我使用PHP保存图像

<?php
    if(isset($_POST['imagebase64'])){
        $data = $_POST['imagebase64'];

        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);
        $data = base64_decode($data);

        file_put_contents('image64.png', $data);
    }
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="croppie.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="croppie.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
    var $uploadCrop;

    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();          
            reader.onload = function (e) {
                $uploadCrop.croppie('bind', {
                    url: e.target.result
                });
                $('.upload-demo').addClass('ready');
            }           
            reader.readAsDataURL(input.files[0]);
        }
    }

    $uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'circle'
        },
        boundary: {
            width: 300,
            height: 300
        }
    });

    $('#upload').on('change', function () { readFile(this); });
    $('.upload-result').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'original'
        }).then(function (resp) {
            $('#imagebase64').val(resp);
            $('#form').submit();
        });
    });

});
</script>
</head>
<body>
<form action="test-image.php" id="form" method="post">
<input type="file" id="upload" value="Choose a file">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<a href="#" class="upload-result">Send</a>
</form>
</body>
</html>


试验
$（文档）.ready（函数（）{
var$上传作物；
函数读取文件（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$UPLOADCROPE.CROPIE（'bind'）{
url:e.target.result
});
$（'.upload demo'）.addClass（'ready'）；
}           
reader.readAsDataURL（input.files[0]）；
}
}
$uploadCrop=$（“#上传演示”）.CROPIE({
视口：{
宽度：200，
身高：200，
类型：“圆圈”
},
边界：{
宽度：300，
身高：300
}
});
$（'#upload'）。on（'change'，function（）{readFile（this）；}）；
$（'.upload result'）。在（'click'，函数（ev）上{
$uploadCrop.CROPIE（'result'{
键入：“画布”，
尺码：“原版”
}).然后（功能（resp）{
$（'#imagebase64'）.val（resp）；
$（'表格'）.submit（）；
});
});
});

这是一个很好的例子。我复制了这个并运行了它。我不断得到一个

未定义的偏移量：1

在

和

行上，它们读取

list（$type，$data）=explode（“；”，$data）和列表（，$data）=分解（'，'，$data）。它生成一个文件，但无法读取。任何指针都会很棒！这应该是Croppie文档站点中唯一的示例。所有的例子只有它的开发者可以理解，没有一个例子真正起作用。我可以使用CI框架裁剪和上传图片
<?php
    if(isset($_POST['imagebase64'])){
        $data = $_POST['imagebase64'];

        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);
        $data = base64_decode($data);

        file_put_contents('image64.png', $data);
    }
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="croppie.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="croppie.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
    var $uploadCrop;

    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();          
            reader.onload = function (e) {
                $uploadCrop.croppie('bind', {
                    url: e.target.result
                });
                $('.upload-demo').addClass('ready');
            }           
            reader.readAsDataURL(input.files[0]);
        }
    }

    $uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'circle'
        },
        boundary: {
            width: 300,
            height: 300
        }
    });

    $('#upload').on('change', function () { readFile(this); });
    $('.upload-result').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'original'
        }).then(function (resp) {
            $('#imagebase64').val(resp);
            $('#form').submit();
        });
    });

});
</script>
</head>
<body>
<form action="test-image.php" id="form" method="post">
<input type="file" id="upload" value="Choose a file">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<a href="#" class="upload-result">Send</a>
</form>
</body>
</html>