javascript jquery在上传croppie插件之前裁剪图像
您好，我在CakePHP中使用croppie插件保存裁剪图像时遇到了困难，但是在保存图像时，它会保存整个图像而不是裁剪图像，在裁剪裁剪src裁剪图像后，它是正确的，但每当我尝试保存它时，它会保存整个默认图像
$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;')); ?>
# 1 楼答案
在功能上：
$uploadCrop.croppie('result', { type: 'canvas', size: 'viewport' })必须使用：
resp.toDataURL()而不是resp.target.result