cropperjs使用不多说网上都有很详细的介绍如下面:
https://blog.csdn.net/lxy4239/article/details/78920979
主要讲下使用的经历
裁剪后图片不失真效果显示
直接上代码:
链接:https://pan.baidu.com/s/1W1liylZzUwKNSt0CBIravw 密码:fypq
等比裁剪:
<div class="btn-group btn-group-crop" id="cutout">
<button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ "maxWidth": 4096, "maxHeight": 4096 }">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false">
裁剪
</span>
</button>
</div>
var options = {
aspectRatio: 0, //裁剪框比例
preview: '.img-preview',
crop: function (e) {
$dataX.val(Math.round(e.x));
$dataY.val(Math.round(e.y));
$dataHeight.val(Math.round(e.height));
$dataWidth.val(Math.round(e.width));
$dataRotate.val(e.rotate);
$dataScaleX.val(e.scaleX);
$dataScaleY.val(e.scaleY);
}
};
var originalImageURL = $image.attr('src');
var uploadedImageURL;
提交保存后台:
$.post('./upload.php',data,function(ret){
var obj = eval("(" + ret + ")");
if(obj.res=='true'){
$('.cropper-container').css('display', 'none');
$('#image_orc').css('display', 'block');
$('#image_orc').attr('src','image/'+obj.src);
$('#image_orc').css('border','1px solid #ddd');
}else{
alert('上传失败');
}
},'text');
<?php
error_reporting(0);//禁用错误报告
if (IS_POST) {
header('Content-type:text/html;charset=utf-8');
$base64_image_content = $_POST['imgBase'];
//将base64编码转换为图片保存
if (preg_match('/^(data:s*image/(w+);base64,)/', $base64_image_content, $result)) {
$type = $result[2];
$new_file = "image/";
if (!file_exists($new_file)) {
//检查是否有该文件夹,如果没有就创建,并给予最高权限
mkdir($new_file, 0700);
}
$img='field' . ".{$type}";
$new_file = $new_file . $img;
//将图片保存到指定的位置
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
echo json_encode(array('res' => 'true','src' => $img));
}else{
echo json_encode(array('res' => 'false'));
}
}else{
echo 'false';
}
}
?>
具体不懂的地方,细节问题可以加群讨论