2017-08-02 155 views
0

您好,我在使用croppie插件保存CakePHP中的裁剪圖像時遇到了困難,但在保存圖像時,它會保存整張圖像而不是裁剪後的圖像,剪切後src作物圖像是正確的,但每當我嘗試保存時,它都會保存整個默認圖像。上傳croppie插件之前的jquery裁剪圖片

$uploadCrop = $('#upload-demo').croppie({ 
 
    enableExif: true, 
 
    viewport: { 
 
    width: 180, 
 
    height: 180, 
 
    type: 'circle' 
 
    }, 
 
    boundary: { 
 
    width: 190, 
 
    height: 190 
 
    }, 
 
    showZoomer: false 
 
}); 
 

 
$('#my_file').on('change', function() { 
 
    $('#tttssss').show(); 
 
    $('#user-select-image').hide(); 
 

 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
    $uploadCrop.croppie('bind', { 
 
     url: e.target.result 
 
    }).then(function() { 
 
     console.log('jQuery bind complete'); 
 
    }); 
 

 
    } 
 
    reader.readAsDataURL(this.files[0]); 
 
}); 
 

 
$('.upload-result').on('click', function(ev) { 
 
    $uploadCrop.croppie('result', { 
 
     type: 'canvas', 
 
     size: 'viewport' 
 
    }) 
 

 

 
    .then(function(resp) { 
 

 
     $('#user-select-image').attr('src', resp); 
 
     $('#user-select-image').show(); 
 
     $("#tttssss").hide(); 
 
    }); 
 
}); 
 
$(document).ready(function() { 
 
    $("#user-select-image").click(function() { 
 
    $("input[id='my_file']").click(); 
 
    }); 
 
});
<div id="tttssss" style="display:none;"> 
 
    <div id="upload-demo"> 
 
    </div> 
 
    <div style="width:70%;margin: 0 auto;"> 
 
    <a class="btn btn-success upload-result" rel="<?php //echo $imge['User']['id'] ?>">Upload Image</a> 
 
    </div> 
 
</div> 
 

 

 
<?php echo $this->Html->image($fileuser, array('class' => 'img-circl', 'id' => 'user-select-image', 'style' => 'margin-top:30px!important;')); ?> 
 
<?php echo $this->Form->file('User.profile_img', array('id' => 'my_file', 'style' => 'display:none;')); ?>

上傳圖片上傳整個圖像

這是我的代碼

回答

0

在功能: $uploadCrop.croppie('result', { type: 'canvas', size: 'viewport' })

.then(function(resp) { 

    $('#user-select-image').attr('src', resp.target.result); 
    $('#user-select-image').show(); 
    $("#tttssss").hide(); 
});}); 

您必須使用:的resp.toDataURL()代替resp.target.result