2017-08-02 14 views
0

私は画像がトリミングされcroppieプラグインを使ってCakePHPの中にトリミングされた画像の保存に困難に直面していますが、画像を保存するとき、それはsrcをトリミングした後、ないトリミングされた画像全体の画像が保存されますこんにちは作物のイメージは正しいですが、いつでも私がそれを保存しようとすると、それはデフォルトのイメージ全体を保存します。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

関連する問題