使用croppie上传和裁剪图像

编程问答 2022-05-26

问题描述

我正在尝试使用croppie插件上传和裁剪上传的图像：我的库

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>


<link rel="stylesheet" href="../libraries/fontawesome-free-5.12.1-web/css/all.css">
<!-- Image Crope,Pre-view stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>

html：

div class="modal fade" id="user-edit-response" data-mdb-backdrop="static" data-mdb-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-side modal-top-right">
            <div class="modal-content">
                <div class="modal-header">
                    <input type="hidden" id="selected-user">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body" id="response-content">

                </div>

            </div>
        </div>
    </div>

脚本：

<script type="text/javascript">
function UploadUserImg(id) {
    document.getElementById('selected-user').value = id;
    var content = ' <input type="file" name="" id="user-img-file" accept="image/*"> <br> ';
    content += ' <div class="profile-img py-3" style="height:350px; width:100%"> <img src = "" id = "user-pic" ></div> ';
    content += '<div id="user-img-resizer"></div>';
    content += ' <a href="#" data-deg="90" style=" float:left"> Rotate left  </a> ';
    content += ' <a href="#"data-deg="90" style=" float:right"> Rotate right  </a> ';
    content += '<br> <hr>';
    content += '<a href="#" class="btn btn-block btn-dark" id="upload-user-img">Crop And Upload </a>';

    $('#response-content').html(content);
    $('#user-edit-response').modal('show');

}


$img_crop = $('#user-img-resizer').croppie({
    enableExif: true,viewport: {
        width: 200,height: 200,type: 'square'
    },boundary: {
        width: 300,height: 300
    },enableOrientation: true
})


$("#user-img-file").on("change",function(event) {

    var reader = new FileReader();
    reader.onload = function(event) {
        $img_crop.croppie('bind',{
            url : event.target.result 
        }).then(function()  {
            console.log('completed')
        })
    }
    reader.readAsDataURL(this.files[0])

})
// To Rotate Image Left or Right
$(".rotate").on("click",function(e) {
    croppie.rotate(parseInt($(this).data('deg')));
    e.preventDefault();
});

$('#user-edit-response').on('hidden.bs.modal',function(e) {
    // This function will call immediately after model close
    // To ensure that old croppie instance is destroyed on every model close
    setTimeout(function() {
        croppie.destroy();
    },100);
})

我不知道为什么这不起作用。我将不胜感激任何帮助 。 我不确定它是否是我的 jq 和 bootstrap 的旧版本与croppie 插件不兼容，但我需要将此版本的 jq 和 bootstrap 用于我的数据表插件

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxcropperjshtmlimageimagejavascript