0

我正在尝试使用名为 Croppie 的图像裁剪器，但我正在苦苦挣扎一段时间......在 Croppie 模态中单击“裁剪和插入图像”后，我希望该图像显示在我的表单的其余部分作为预览图像，然后将该图像发送到另一个 ajax 发布功能

JavaScript：

<script>
$(document).ready(function(){

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

    $('#insert_image').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]);
        $('#insertimageModal').modal('show');
    });

    $('.crop_image').click(function(event){
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response){
            $.ajax({
                url:'insert.php',
                type:'POST',
                data:{"image":response},
                success:function(data){
                    $('#insertimageModal').modal('hide');
                    load_images();
                    alert(data);
                }
            })
        });
    });


});

HTML 表单：

 <form>
                <div class="form-group">
                    <input type="text" class="form-control input-default " placeholder="Produkto pavadinimas">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-rounded" placeholder="Produkto kaina">
                </div>
                <div class="form-group">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="insert_image" id="insert_image" accept="image/*" />
                        <label class="custom-file-label">Choose file</label>
                        <br />
                        <div id="store_image"></div>
                    </div>
                    <div class="container">
                        <div id="upload-preview" class="mt30 mb35"></div>
                    </div>
                </div>

                    </div>

                </div>
            </form>

模态：

<div id="insertimageModal" class="modal" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">
                <div class="col-md-8 text-center">
                    <div id="image_demo" style="width:350px; margin-top:30px"></div>
                </div>
                <div class="col-md-4" style="padding-top:30px;">
                    <br />
                    <button class="btn btn-success crop_image">Crop & Insert Image</button>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

我尝试将图像设置为上传预览容器，但它没有工作......

4

0 回答 0