第三百九十节，Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传

实现原理

前台用cropper插件，将用户上传头像时裁剪图片的坐标和图片，传到逻辑处理函数里，在逻辑处理函数里接收原始图片进行保存，然后接收用户的裁剪坐标，利用python的Pillow模块图像处理模块里的PIL(图像库)，将原始图片根据用户裁剪坐标进行裁剪

有两个重点：第一要准备好cropper头像裁剪插件，第二python环境要安装好Pillow模块

htnl页面

编写htnl页面，引入cropper插件相关的css和js文件

注意：下面红色背景的地方不要忘记设置，否则表单无法提交到后台

<!DOCTYPE html>

<html lang="en">

{% load staticfiles %} {# 启用静态文件引用#}

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link href="{% static 'tou_xiang/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <link href="{% static 'tou_xiang/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">

    <link href="{% static 'tou_xiang/cropper/cropper.min.css' %}" rel="stylesheet">

    <link href="{% static 'tou_xiang/sitelogo/sitelogo.css' %}" rel="stylesheet">

</head>

<body>

{# 头像上传开始----------------------------------- #}

{# 头像区块 #}

<div class="ibox-content">

    <div class="row">

        <div id="crop-avatar" class="col-md-6">

            <div class="avatar-view" title="点击上传头像">

                <img src="{{ MEDIA_URL }}{% for ch in ch_username %}{{ ch.image }}{% endfor %}"

                     data-am-popover="{content: '点击上传头像', trigger: 'hover focus'}">

            </div>

        </div>

    </div>

</div>

{# 上传弹出框 #}

<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"

     tabindex="-1">

    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <form class="avatar-form" action="{% url 'touxiang' %}" enctype="multipart/form-data" method="post">

                <div class="modal-header">

                    <button class="close" data-dismiss="modal" type="button">&times;</button>

                    <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>

                </div>

                <div class="modal-body">

                    <div class="avatar-body">

                        <div id="avatar-upload" class="avatar-upload">

                            <input class="avatar-src" name="avatar_src" type="hidden">

                            <input class="avatar-data" name="avatar_data" type="hidden">

                            <label for="avatarInput">

                                <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">

                                <div class="tup btn btn-primary" dir="ltr">

                                    <span class="glyphicon glyphicon-cloud"></span>

                                    上传文件

                                </div>

                            </label>

                        </div>

                        <div class="row">

                            <div class="col-md-9">

                                <div class="avatar-wrapper"></div>

                            </div>

                            <div class="col-md-3">

                                <div class="avatar-preview preview-lg"></div>

                                {#<div class="avatar-preview preview-md"></div>#}

                                {#<div class="avatar-preview preview-sm"></div>#}

                            </div>

                        </div>

                        <div class="row avatar-btns">

                            <div class="col-md-4">

                                <div class="btn-group">

                                    <button class="btn btn-primary" data-method="rotate" data-option="-90" type="button"

                                            title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转

                                    </button>

                                </div>

                                <div class="btn-group">

                                    <button class="btn btn-primary" data-method="rotate" data-option="90" type="button"

                                            title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转

                                    </button>

                                </div>

                            </div>

                            <div class="col-md-5" style="text-align: right;">

                                <button class="btn btn-primary fa fa-arrows" data-method="setDragMode" data-option="move"

                                        type="button" title="移动">

                                </button>

                                <button type="button" class="btn btn-primary fa fa-search-plus" data-method="zoom"

                                        data-option="0.1" title="放大图片">

                                </button>

                                <button type="button" class="btn btn-primary fa fa-search-minus" data-method="zoom"

                                        data-option="-0.1" title="缩小图片">

                                </button>

                                <button type="button" class="btn btn-primary fa fa-refresh" data-method="reset"

                                        title="重置图片">

                                </button>

                            </div>

                            <div class="col-md-3">

                                <button id="txiangform" class="btn btn-primary btn-block avatar-save" type="submit">

                                    <i class="fa fa-save"></i> 保存修改

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            {% csrf_token %}

            </form>

        </div>

    </div>

</div>

{# 头像上传结束------------------------------------- #}

<script src="{% static 'tou_xiang/jquery.min.js' %}"></script>

<script src="{% static 'tou_xiang/bootstrap/js/bootstrap.min.js' %}"></script>

<script src="{% static 'tou_xiang/cropper/cropper.min.js' %}"></script>

<script src="{% static 'tou_xiang/sitelogo/sitelogo.js' %}"></script>

</body>

</html>

效果图

专门给上传头像配置一个url路由映射

urlpatterns = [

    url(r'usercenter_info.html', usercenter_info.as_view(), name='usercenter_info'),

    # 上传头像

    url(r'touxiang/', touxiang.as_view(), name='touxiang')

]

forms.py文件编写头像表单验证

#!/usr/bin/env python

# -*- coding:utf8 -*-

from django import forms                             # 导入Django的表单验证模块

from app_users.models import Users       # 导入数据库表类

class touxiangForm(forms.Form):

    avatar_file = forms.ImageField()

views.py编写逻辑

import json

from django.shortcuts import render, HttpResponse, redirect  # 导入django向浏览器返回方法

from django.views.generic.base import Viewfrom pure_pagination import Paginator, EmptyPage, PageNotAnInteger

from app_organization.models import CityDict, CourseOrg  # 数据库表

from app_users.models import Users

from app_organization.forms import touxiangForm

from utils.uploadfile import Uploadfile

class touxiang(View):

    def post(self, request):

        usern = request.session.get("username")                 # 获取用户登录名称

        us = Users.objects.filter(username=usern)               # 到数据库查找用户

        yanzh = touxiangForm(request.POST, request.FILES)       # 验证表单

        if yanzh.is_valid():                                    # 表单验证通过

            erf = request.FILES['avatar_file']                  # 获取上传图片

            jetu = request.POST['avatar_data']

            # 将上传图片传入一个自定义函数里裁剪，返回图片路径

            fanhui = Uploadfile('image', erf, jetu)

            us.update(image=fanhui)                             # 将图片路径修改到当前会员数据库

            # 向前台返回一个json，result值是图片路径

            return HttpResponse(json.dumps({'result': '/media/' + fanhui}))

        else:

            return HttpResponse("验证失败")

编写Uploadfile截图函数

#!/usr/bin/env python

# -*- coding:utf8 -*-

import os

import time

import random                                                   # 引入随机模块文件

import re

import json

from PIL import Image

from MxOnline.settings import MEDIA_ROOT                        # 导入配置文件里的上传资源路径

def Uploadfile(mu_lu, wen_jian, jetu):

    """

    第一参数，上传头像数据库models里指定的目录名称【字符串类型】

    第二参数，接收文件上传对象inMemoryUploadedFile对象【inMemoryUploadedFile对象】

    第三参数，接收头像要截图的坐标，x.y.width.height【json类型】

    裁剪成功返回图片路径

    """

    if not MEDIA_ROOT:

        return '请在settings.py配置上传文件目录'

    try:

        nian_yue = time.strftime('%Y/%m/')

        pj_mu_lu = os.path.abspath(os.path.join(MEDIA_ROOT, mu_lu, nian_yue))                           # 拼接上传路径

        pd_mu_lu = os.path.exists(pj_mu_lu)

        if pd_mu_lu:                                                                                    # 判断上传目录是否存在

            pass

        else:

            os.makedirs(pj_mu_lu)                                                                       # 创建上传目录

        # 接收文件上传对象inMemoryUploadedFile对象

        wenjian = wen_jian

        name = wenjian.name                                                                             # 获取文件名称

        size = wenjian.size                                                                             # 文件大小(字节)

        # 调用随机函数(随机数开始范围,随机数结束范围)

        f1 = str(random.randrange(1, 99999999))

        f2 = str(time.strftime('%Y%m%d%H%M%S'))

        f3 = str(f2 + f1)

        houzh = re.findall('.*\.(.*)', name)[0]

        wj_name = f3 + '.' + houzh

        xie_ru_lu_jing = pj_mu_lu + '/' + wj_name

        # print(xie_ru_lu_jing)

        # 以读写字节模式打开，存在覆盖没有创建

        gshi = 'BMP,PNG,GIF,JPG,JPEG'

        pd_gshi = re.findall(houzh.upper(), gshi)

        if pd_gshi:

            xieru = open(xie_ru_lu_jing, 'wb')

            for chunk in wenjian.chunks():                                                  # 循环文件数据块

                xieru.write(chunk)                                                          # 写入文件

            xieru.close()                                                                   # 关闭

        else:

            return '上传的不是图片文件'

        # 判断文件是否写入成功返回布尔值

        pd_xieru = os.path.exists(xie_ru_lu_jing)

        if pd_xieru:

            # 开始根据前台提供的坐标截图

            zuo_biao = json.loads(jetu)

            # 获取坐标

            t_x = int(zuo_biao['x'])

            t_y = int(zuo_biao['y'])

            t_width = t_x + int(zuo_biao['width'])

            t_height = t_y + int(zuo_biao['height'])

            # 打开要截图的图片

            im = Image.open(xie_ru_lu_jing)

            # print(xie_ru_lu_jing)

            # 裁剪图片,裁剪尺寸为200*200，可以在resize()设置

            crop_im = im.convert("RGBA").crop((t_x, t_y, t_width, t_height)).resize((200, 200), Image.ANTIALIAS)

            # 设置背景颜色为白色

            out = Image.new('RGBA', crop_im.size, (255, 255, 255))

            out.paste(crop_im, (0, 0, 200, 200), crop_im)

            # 保存图片

            crop_im.save(xie_ru_lu_jing)

            # 返回图片路径，从第一个参数目录开始的

            wj_lj = mu_lu + '/' + nian_yue + wj_name

            return wj_lj

    except Exception as e:

        return e

最终效果

第三百九十节，Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传的更多相关文章

  1. 第三百七十八节，Django+Xadmin打造上线标准的在线教育平台—django自带的admin后台管理介绍

    第三百七十八节,Django+Xadmin打造上线标准的在线教育平台—django自带的admin后台管理介绍 配置django的admin数据库管理后台 首先urls.py配置数据库后台路由映射,一 ...

  2. 第三百九十九节，Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装mysql5.6

    第三百九十九节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装mysql5.6 1.检测系统是否已经安装过mysql或其依赖,若已装过要先将其删除,否则第4步 ...

  3. 第三百九十六节，Django+Xadmin打造上线标准的在线教育平台—其他插件使用说，自定义列表页上传插件

    第三百九十六节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,自定义列表页上传插件 设置后台列表页面字段统计 在当前APP里的adminx.py文件里的数据表管理器里设置 ag ...

  4. 第三百九十五节，Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框

    第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...

  5. 第三百九十四节，Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置2，以及目录结构说明

    第三百九十四节,Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置2,以及目录结构说明 设置后台列表页面可以直接修改字段内容 在当前APP里的adminx.py文件里的 ...

  6. 第三百九十八节，Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置

    第三百九十八节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置 1.Linux安装配置 注意事项: 虚拟机网卡桥接模式 不要拨VPN 如果,网络怎么都 ...

  7. 第三百九十七节，Django+Xadmin打造上线标准的在线教育平台—其他插件使用说，主题本地化设置

    第三百九十七节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,主题本地化设置 主题设置是在xadmin\plugins\themes.py这个文件 默认xadmin是通过下面这 ...

  8. 第三百九十三节，Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置

    第三百九十三节,Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置 设置后台某个字段的排序规则 在当前APP里的adminx.py文件里的数据表管理器里设置 order ...

  9. 第三百九十一节，Django+Xadmin打造上线标准的在线教育平台—404，403，500页面配置

    第三百九十一节,Django+Xadmin打造上线标准的在线教育平台—404,403,500页面配置 路由映射在全局也就是根目录里的urls.py里配置404路由映射 注意:不是写在urlpatter ...

随机推荐

  1. 【C/C++】void指针知多少

    void指针 void指针平时用的地方不多,但是不代表它不重要 #include <stdio.h> typedef ]; //指针数组的指针类型 int main(void) { voi ...

  2. Docker 入门 --- 命令总结

    Docker命令总结 前言 命令来自于官网的get-started教程,放在这里自用 part-1 ## List Docker CLI commands docker docker containe ...

  3. Android下基于PCM的音频渲染

    环境准备 请按照我之前的文章-Android下基于SDL的位图渲染,安装必要的开发环境. 实践篇 这里主要参考Beginning SDL 2.0(6) 音频渲染及wav播放,只不过将源从WAV文件改成 ...

  4. [Java]随记--HttpClient发送put请求

    http://blog.csdn.net/u010989191/article/details/52852155 ******************************************* ...

  5. js判断浏览器内核和版本(包括手机端设备)

    var X, xue;xue = xue || function(expr, fn) {    return xue.dom ? xue.dom(expr, fn) : {};};X = xue;wi ...

  6. js弹出层的插件

    1.jquery.fancybox.pack.js 2.artdialog 3.

  7. 通过python-libvirt管理KVM虚拟机 代码实现

    初步代码 <span style="font-size:18px;">''''' Work with virtual machines managed by libvi ...

  8. C#防止内存泄露的方法

    一般程序员()都会这样认为:用C#这样的语言编程的一个好处就是无需再考虑内存的分配和释放.你只需创建对象,然后通过一种叫做垃圾收集的机制来处理这 些对象,也就是说:当它们不再被应用程序需要的时候来自动 ...

  9. vue前后分离动态路由和权限管理方案

    需求 需要根据不同的角色来显示不同的菜单 问题 系统是前后分离模式开发的,出现了后端接口和前端路由都需要权限管理. 思路 后端的接口肯定得验证权限 在前端做好组件名和组件的映射 前端的路由通过后端发回 ...

  10. java基础篇---XML解析（一）

    XML是可扩展标记语言 在XML文件中由于更多的是描述信息的内容,所以在得到一个xml文档后应该利用程序安装其中元素的定义名称去除对应的内容,这样的操作称为XML解析. 在XML解析中W3C定义SAX ...