{#cropper编辑区域#}
<div class="avatar-wrapper" id='avatar-wrapper'><img src="">
</div>
{#头像预览区域#}
<div class="avatar-preview" style=" border-radius: 15%">　　<img style="width: 96px; height: 96px;" src=""></div>
{#上传按钮#}
<a id="upload" class="btn btn-primary">上传头像</a>
<label class="btn btn-primary" for="avatar-input">选择图片</label>

{#form#}

<form action="" method="post" id="avatar_form" enctype="multipart/form-data">

    {%csrf_token%}   <input style="display:none" type="file" class="avatar-input" id="avatar-input" name="avatar_file" accept=".jpg,.jpeg,.png">   <input type="hidden" id="avatar_x" name="avatar_x">   <input type="hidden" id="avatar_y" name="avatar_y">   <input type="hidden" id="avatar_width" name="avatar_width">   <input type="hidden" id="avatar_height" name="avatar_height"></form>

var image = $('#avatar-wrapper img');
image.cropper({checkImageOrigin: true, //检查图片来源dragMode: 'move',   //图片可移动restore:false,      //窗体调整大小之后不自动恢复裁剪区域zoomOnWheel: false, //不允许通过鼠标滚轮缩放zoomOnTouch: false, //不允许通过触摸缩放aspectRatio: 1 / 1, //裁剪比例autoCropArea: 0.5,  //裁剪背景透明度autoCropArea: 1,    //自动裁剪的比例preview: ".avatar-preview",//预览区域crop: function (e) {//返回图片编辑相关数据$('#avatar_x').val(e.detail.x);$('#avatar_y').val(e.detail.y);$('#avatar_width').val(e.detail.width);$('#avatar_height').val(e.detail.height);},
});        

        $("#avatar-input").change(function(){var URL = window.URL || window.webkitURL;if(URL){var files = this.files;if (files && files.length){var file = files[0];if (/^image\/\w+$/.test(file.type)) {var blobURL = URL.createObjectURL(file);image.cropper('reset').cropper('replace', blobURL);$('.avatar_crop .disabled').removeClass('disabled');} else {alert('请选择一张图片');}}}});

        $('#upload').click(function () {if($('#avatar-wrapper img').attr('src')==''){$('#infoModal h4').html('请先选择一个图片')$('#infoModal').modal('show')return false;}var $form=$("#avatar_form")$form.ajaxSubmit(function (headpicaddress) {})

def user_my_info_headpic(request):# 剪裁数据获取top = int(float(request.POST['avatar_y']))buttom = top + int(float(request.POST['avatar_height']))left = int(float(request.POST['avatar_x']))right = left + int(float(request.POST['avatar_width']))# 图片临时保存with open(os.path.join(settings.BASE_DIR, "test1.jpg"), "wb") as f:for line in request.FILES['avatar_file']:f.write(line)# 打开图片im = Image.open(os.path.join(settings.BASE_DIR, "test1.jpg"))# 剪裁图片crop_im = im.crop((left, top, right, buttom))# 保存图片crop_im.save(os.path.join(settings.BASE_DIR, "test2.jpg"))return HttpResponse("ok")