Django部署上传和裁剪头像图片的插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chengqiuming/article/details/85225547

一 插件下载地址

https://github.com/qiwsir/DjangoPracticeProject

从该地址下载ImageCrop文件包。

二 部署插件到项目

1 复制ImgCrop/css/style.css到本项目的mysite/static/css/imagecrop.css，并稍作修改。

@charset "utf-8";
.container {
    width: 400px;
    margin: 40px auto 0 auto;
    position: relative;
    font-family: 微软雅黑;
    font-size: 12px;
}
.container p {
    line-height: 12px;
    line-height: 0px;
    height: 0px;
    margin: 10px;
    color: #bbb
}
.action {
    width: 400px;
    height: 30px;
    margin: 10px 0;
}
.cropped {
    position: absolute;
    right: -230px;
    top: 0;
    width: 200px;
    border: 1px #ddd solid;
    height: 460px;
    padding: 4px;
    box-shadow: 0px 0px 12px #ddd;
    text-align: center;
}
.imageBox {
    position: relative;
    height: 400px;
    width: 400px;
    border: 1px solid #aaa;
    background: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    cursor: move;
    box-shadow: 4px 4px 12px #B0B0B0;
}
.imageBox .thumbBox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    border-radius:200px;
    margin-left: -100px;
    box-sizing: border-box;
    border: 1px solid rgb(102, 102, 102);
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
    background: none repeat scroll 0% 0% transparent;
}
.imageBox .spinner {
    position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  line-height: 400px;
  color: #2F2A2A;
  background: rgba(213, 211, 211, 0.7);
}
.Btnsty_peyton{ float: right;
   width: 66px;
  display: inline-block;
  margin-bottom: 10px;
  height: 57px;
  line-height: 57px;
  font-size: 20px;
  color: #FFFFFF;
  margin:0px 2px;
  background-color: #f38e81;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0px 0px 5px #B0B0B0;
  border: 0px #fff solid;}
/*选择文件上传*/
.new-contentarea {
    width: 165px;
    overflow:hidden;
    margin: 0 auto;
    position:relative;float:left;
}
.new-contentarea label {
    width:100%;
    height:100%;
    display:block;
}
.new-contentarea input[type=file] {
    width:188px;
    height:60px;
    background:#333;
    margin: 0 auto;
    position:absolute;
    right:50%;
    margin-right:-94px;
    top:0;
    right/*\**/:0px\9;
    margin-right/*\**/:0px\9;
    width/*\**/:10px\9;
    opacity:0;
    filter:alpha(opacity=0);
    z-index:2;
}
a.upload-img{
    width:165px;
    display: inline-block;
    margin-bottom: 10px;
    height:57px;
    line-height: 57px;
    font-size: 20px;
    color: #FFFFFF;
    background-color: #f38e81;
    border-radius: 3px;
    text-decoration:none;
    cursor:pointer;
    border: 0px #fff solid;
    box-shadow: 0px 0px 5px #B0B0B0;
}
a.upload-img:hover{
    background-color: #ec7e70;
}

.tc{text-align:center;}

2 复制ImgCrop/js/jquery-1.11.1.min.js到mysite/static/js/jquery-1.11.1.min.js

3 复制ImgCrop/js/cropbox.js到mysite/static/js/cropbox-min.js

三 mysite/account/views.py增加一个视图函数

@login_required(login_url='/account/login/')
def my_image(request):
    return render(request, 'account/imagecrop.html',)

四 新增mysite/templates/account/imagecrop.html

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/imagecrop.css' %}">
<div class="container" style="margin-left:10px">
  <div class="imageBox">
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none"></div>
  </div>
  <div class="action"> 
    <!-- <input type="file" id="file" style=" width: 200px">-->
    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
      <label for="upload-file">请先选择图片...</label>
      </a>
      <input type="file" class="" name="upload-file" id="upload-file" />
    </div>
    <input type="button" id="btnCrop" class="Btnsty_peyton" value="OK">
    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
  </div>
  <div class="cropped"></div>
</div>

<script src="{% static 'js/jquery-1.11.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/cropbox-min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/csrf.js' %}"></script>
<script type="text/javascript">
 
$(window).load(function() {
	var options =
	{
		thumbBox: '.thumbBox',
		spinner: '.spinner',
		imgSrc: ''
	}
	var cropper = $('.imageBox').cropbox(options);
	var img="";
	$('#upload-file').on('change', function(){
		var reader = new FileReader();
		reader.onload = function(e) {
			options.imgSrc = e.target.result;
			cropper = $('.imageBox').cropbox(options);
			getImg();
		}
		reader.readAsDataURL(this.files[0]);
		this.files = [];
		//getImg();
	})
	$('#btnCrop').on('click', function(){
	    //alert("图片上传喽");
            $.ajax({
	        url: '{% url "account:my_image" %}',
		type: 'POST',
		data: {"img": img},
		success: function(e){
		    //location.href= "{% url 'account:my_information' %}"
                    if(e == "1"){        
			parent.location.reload();
		    } else {
			alert("sorry, you are not lucky. the picutre can't been uploaded.");
		    }
		},
	    });
        })
	function getImg(){
		img = cropper.getDataURL();
		$('.cropped').html('');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
		}
		
	$(".imageBox").on("mouseup",function(){
 		getImg();
  		});
		
	$('#btnZoomIn').on('click', function(){
		cropper.zoomIn();
	})
	$('#btnZoomOut').on('click', function(){
		cropper.zoomOut();
	})
});
</script>

五 编辑mysite/account/urls.py

from django.conf.urls import url
from . import views
from django.contrib.auth import views as auth_views

urlpatterns = [
    # 自定义登录
    # url(r'^login/$', views.user_login, name='user_login'),
    # django内置的登录
    url(r"^login/$", auth_views.login, name="user_login"),
    url(r"^new-login/$", auth_views.login, {"template_name": "account/login.html"}),
    url(r'^logout/$', auth_views.logout, {"template_name": "account/logout.html"}, name='user_logout'),
    url(r'^register/$', views.register, name="user_register"),
    # 给password_change方法传入post_change_redirect参数
    url(r'^password-change/$', auth_views.password_change, {"post_change_redirect": "/account/password-change-done"},name='password_change'),
    url(r'^password-change-done/$', auth_views.password_change_done, name='password_change_done'),
    # 重置密码开始
    url(r'^password-reset/$', auth_views.password_reset, {"template_name":"account/password_reset_form.html","subject_template_name":"account/password_reset_subject.txt", "email_template_name":"account/password_reset_email.html",  "post_reset_redirect":"/account/password-reset-done"}, name="password_reset"),
    url(r'^password-reset-done/$', auth_views.password_reset_done, {"template_name":"account/password_reset_done.html"}, name="password_reset_done"),
    url(r'^password-reset-confirm/(?P<uidb64>[-\w]+)/(?P<token>[-\w]+)/$', auth_views.password_reset_confirm, {"template_name":"account/password_reset_confirm.html", "post_reset_redirect":"/account/password-reset-complete"}, name="password_reset_confirm"),
    url(r'^password-reset-complete/$', auth_views.password_reset_complete, {"template_name":"account/password_reset_complete.html"}, name="password_reset_complete"),
    # 重置密码结束
    # 个人信息
    url(r'^my-information/$', views.myself, name="my_information"),
    # 编辑个人信息
    url(r'^edit-my-information/$', views.myself_edit, name="edit_my_information"),
    # 上传图片
    url(r'^my-image/$', views.my_image, name="my_image"),
]

六 测试

1 浏览器输入：http://localhost:8000/account/my-image/

2 选择一个文件，目前只有裁剪能力，没有上传能力