Cropper.js 裁剪图片，并利用 FormData 对象将裁剪图片生成 Blob 数据上传到服务器
<label for="Admin-Image-img_cut" class="col-sm-2 col-md-1 col-lg-1control-label">图片裁剪</label>
<?php if(isset($data['img_url']) && $data['img_url']){echo '<imgid="img-cut" src="'.$data['img_url'].'">'; } ?>
<input style="margin: 10px 0; width: 150%;" type="text" class="form-control" id="figure-img" name="figure_img" />
<input type="hidden" id="figure-type" name="figure_type" value="" />
<button type="button" id="save-cuted-img">确定裁剪</button>
let $image = $('#img-cut');
$image.cropper({
viewMode: 1,
aspectRatio:600/400,
zoomable: false,
crop: function(event) { }
});
// Get the Cropper.js instance after initialized 有损压缩
let cropper = $image.data('cropper');
$('body').on('click', '#save-cuted-img', function(event) {
event.preventDefault();<br> // 防止canvas数据量过大
cropper.getCroppedCanvas({ maxWidth: 2048, maxHeight: 2048 }).toBlob((blob) => {
const formData = new FormData();
formData.append('file', blob , 'croppedImage1.png');
$.ajax({
type:"POST",
url:"<?php echo U('Upload/ajax_file'); ?>",
processData: false,
contentType: false,
data: formData,
dataType: 'json',
beforeSend: function () {
$('#save-cuted-img').text('正在上传...').prop('disabled', true);
},
success: function(re){
if (re.success) {
$('#figure-img').val(re.msg);
$('#figure-type').val($('#Admin-Image-type_id option:selected').text());
alert("裁剪图片上传成功");
} else {
alert(re.msg);
}
},
error() {
console.log('裁剪图片上传失败');
},
complete: function () {
$('#save-cuted-img').text('确定裁剪').prop('disabled', false);
}
});
}, 'image/png', 1); // 设置图片质量
});
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]