2

使用croppie.js裁剪上传后，回调函数无法设置img标签的src属性

试过了，

 1. Sending raw image path i.e. images/user/3432847.png
 2. Sending image tag 
    <img src="images/user/1566252299.png" class="img-thumbnail" alt="avatar"> from server.
 3. seen data with alerts which is proper.

php

<?php
if(isset($_POST["image"]))
{
    $path = 'images/user/'; // upload directory
    $data = $_POST["image"];
    $image_array_1 = explode(";",$data);
    $image_array_2 = explode(",",$image_array_1[1]);
    $data = base64_decode($image_array_2[1]);
    $imageName = time() .'.png';
    file_put_contents($path.''.$imageName,$data);
    echo $path.$imageName; //raw path with image
}
?>

html

<div>
        <div id="preview"><img id="uploaded_image" src="images/user/userdefault.png" class="img-thumbnail" alt="avatar"></div>
             <form id="imguploadfrm">
                 <span><i><b>Upload a photo...</b></i></span>
                 <input id="uploadImage" name="uploadImage" type="file" class="text-center center-block file-upload">
             </form>
</div>

<div id="uploadimageModal" class="modal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title w-100"> Upload & crop Image</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <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 />
                            <br />
                            <br />
                            <button class="btn btn-success crop_image">Crop & Upload Image</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

jQuery

 $(document).ready(function(e) {
        /*Croppie - image crop section */
        $image_crop = $('#image_demo').croppie({
            enableExif: true,
            viewport: {
                width: 140,
                height: 140,
                type: 'square'
            },
            boundary: {
                width: 500,
                height: 500
            }
        });
        $('#uploadImage').on('change', function(){
            //debugger;
            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]);
            $('#uploadimageModal').modal('show');
        });
        $('.crop_image').click(function(event){
            $image_crop.croppie('result',{
                type:'canvas',
                size: 'viewport'
            }).then(function(response){
                $.ajax({
                    url: "imageupload.php",
                    type: "POST",
                    data:{"image": response},
                    success:function(data){
                        alert(data);
                        console.log(data);
                        $('#uploadimageModal').modal('hide');
                        $('#uploaded_image').attr('src',data);

                    },
                    error: function(res){
                        debugger;
                            alert(res);
                    }
                });
            })
        });
    });

我希望裁剪后的图像会显示在指定的图像标签中，但它不会发生。该文件作为裁剪图像存储在服务器文件夹中。只有回调成功函数不能分配src。上传后，图像标签显示其默认图像，该图像设置为静态图像。没有错误信息。

4

0 回答 0