效果图
PHP处理
PHP代码和视频教程请到 网盘下载
https://yunpan.cn/crRDKgrCCh3Yk 访问密码 b13a
前端处理
<!DOCTYPE html>
<html lang="en">
<head>
<me
<ti
<li
<sc
<sc
<sc
<st
.container{width: 300px;height: 300px;}
#crop_pp{width: 300px;}
</st
</head>
<body>
<h1>ajax - 头像裁剪功能</h1>
<form id="form1" method="POST" enctype="multipart/form-data" action="{:U('Index/ajaxUpload')}">
<input type="file" name="Picture" />
<input type="submit" value="上传图片" />
</form>
<div class="container">
<img id="crop_pic" src="__IMG__/pic.jpg">
</div>
<!-- 裁剪后容器 -->
<div id="crop_pp">
</div>
<div>
<br />
<form id="crop_" action="{:U('Index/crop_pic')}" method="post">
<input type="hidden" value="" name="x" />
<input type="hidden" value="" name="y" />
<input type="hidden" value="" name="w" />
<input type="hidden" value="" name="h" />
<input type="hidden" value="" name="pic_path" />
<input id="crop_sub" type="submit" value="裁剪" />
</form>
</div>
<sc
$(function(){
$("#form1").ajaxForm(function(res){
//alert('上传成功');
var crop_pic = '<img id="crop_pic" src="'+ res +'">';
$(".container").html( crop_pic )
$("input[name='pic_path']").val( res )
init_crop();
console.log(res);
return false;
});
$("#crop_").ajaxForm(function(res){
//console.log(res);
$("#crop_pp").html( '<img width="100%" src="' + res + '" />')
return false;
});
/* 初始化裁剪 */
init_crop()
})
function init_crop () {
$('.container > img').cropper({
aspectRatio: 16 / 9,
crop: function(data) {
// console.log(data)
console.log(data.x)
$("input[name='x']").val(data.x);
$("input[name='y']").val(data.y);
$("input[name='w']").val(data.width);
$("input[name='h']").val(data.height);
// 出来裁切后的图片数据.
}
})
}
</sc
</body>
</html>
最佳答案
