jQuery裁剪图片，然后上传croppie插件

Question

Hello I'm facing difficulty in saving the cropped image in CakePHP using croppie plugin image is cropped but when saving the image it saves the whole image not the cropped image, after cropping the src of crop image it is correct but whenever I try to save it, it saves the whole default image.

 $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;')); ?> 

Upload the image it upload the whole image

This is my code

Answer 1

In function: $uploadCrop.croppie('result', { type: 'canvas', size: 'viewport' })

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

You must use: resp.toDataURL() instead of resp.target.result