您好，我在使用croppie插件在CakePHP中保存裁剪后的图像时遇到困难，图像被裁剪，但是在保存图像时，它保存整个图像而不是裁剪后的图像，在裁剪裁剪图像的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;')); ?>上传图片即上传整张图片
这是我的代码
最佳答案
在函数中:
$uploadCrop.croppie('结果', {
类型:' Canvas '，
大小:“视口(viewport)”
})
.then(函数(resp) {
$('#user-select-image').attr('src', resp.target.result);
$('#user-select-image').show();
$("#tttssss").hide();
});});
您必须使用:resp.toDataURL() 而不是 resp.target.result
关于javascript - jquery在上传croppie插件之前裁剪图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45460817/