Django imgareaselect 手动剪切头像

来源：互联网发布：c4dr18 win mac 编辑：程序博客网时间：2024/04/30 03:35

Django imgareaselect 手动剪切头像

代码如下：

index.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>上传图片</title></head><body><form action="." method="post" enctype="multipart/form-data">{% csrf_token %}    <table border="0">        {{form.as_table}}        <tr>            <td></td>            <td><input type="submit" value="上传"/></td>        </tr>    </table></form></body></html>

show.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML5的标题</title><style>ul {width:80%;padding:5px;}li{list-style:none;float:left;padding:5px;margin:5px;background-color:#ccc;}.info{color:green;}</style></head><body>    <p><a href="{%url headhat_index%}">继续上传头像</a></p>    {% if messages %}        {% for message in messages %}            <p{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</p>        {% endfor %}    {% endif %}<ul>    {%for p in photos%}    <li><img src="{{path}}{{p.photo_name}}" alt="big"/><br/>        <img src="{{path}}{{p.photo_thumb}}" alt="thumb"/> <a href="{%url headhat_cut p.id%}">继续剪切</a>        </li>    {%endfor%}</ul></body></html>

cut.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>剪切</title><link rel="stylesheet" type="text/css" href="/static/jquery.imgareaselect-0.9.3/css/imgareaselect-default.css" /><style rel="stylesheet"  type="text/css" >.area {background:none repeat scroll 0 0  #EEEEFF;border:2px solid #DDDDEE;padding:0.6em 0.6em 1em 0.6em;width:85%;display:block;margin-bottom:1em;}div.frame {background:none repeat scroll 0 0 #FFFFFF;border:2px solid #DDDDDD;padding:0.4em;}.info{color:green;}</style><script type="text/javascript" src="/static/jquery.imgareaselect-0.9.3/scripts/jquery.min.js"></script><script type="text/javascript" src="/static/jquery.imgareaselect-0.9.3/scripts/jquery.imgareaselect.min.js"></script> <script type="text/javascript">function preview(img, selection) {    if (!selection.width || !selection.height)        return;        var scaleX = 100 / selection.width;    var scaleY = 100 / selection.height;        $('#preview img').css({        width: Math.round(scaleX * 300),        height: Math.round(scaleY * 300),        marginLeft: -Math.round(scaleX * selection.x1),        marginTop: -Math.round(scaleY * selection.y1)    });        $('#id_x1').val(selection.x1);    $('#id_y1').val(selection.y1);    $('#id_x2').val(selection.x2);    $('#id_y2').val(selection.y2);    $('#id_w').val(selection.width);    $('#id_h').val(selection.height);}$(function (){    $('#id_x1').val(100);    $('#id_y1').val(100);    $('#id_x2').val(200);    $('#id_y2').val(200);    $('#id_w').val(100);    $('#id_h').val(100);    $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,                        fadeSpeed: 200, minHeight:100,minWidth:100,onSelectChange: preview,                        x1: 100, y1: 100, x2: 200, y2: 200    });}); </script></head><body><h3>头像剪切 <a href="{%url headhat_index%}"><b>返回</b></a>  </h3>{% if messages %}    {% for message in messages %}    <p{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</p>    {% endfor %}    {% endif %}<div class="area"><div style="float: left; width: 45%;">    <p class="instructions">点击原图 选择剪切区域</p>    <div style="margin: 0pt 0.3em; width: 300px; height: 300px;" class="frame">        <img src="{{vir_path}}" id="photo" alt="30"/>    </div></div><div style="float: left; width: 40%; padding-top:50px;">    <p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">预览选择区域</p>    <div style="margin: 0pt 1em; width: 100px; height: 100px;" class="frame">        <div style="width: 100px; height: 100px; overflow: hidden;" id="preview">            <img style="width: 244px; height: 244px; margin-left: -71px; margin-top: -54px;" src="{{vir_path}}" alt="300"/>        </div>    </div>    <form action="" method="POST">{% csrf_token %}    <table style="margin-top: 1em;">    <thead>    <tr>    <th style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;" colspan="2">    剪切坐标    </th>    <th style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;" colspan="2">    剪切尺寸    </th>    </tr>    </thead>    <tbody>    <tr>    <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>    <td style="width: 30%;">{{form.x1}}</td>    <td style="width: 20%;"><b>宽度:</b></td>    <td>{{form.w}}</td>    </tr>    <tr>    <td><b>Y<sub>1</sub>:</b></td>    <td>{{form.y1}}</td>    <td><b>高度:</b></td>    <td>{{form.h}}</td>    </tr>    <tr>    <td><b>X<sub>2</sub>:</b></td>    <td>{{form.x2}}</td>    <td></td>    <td></td>    </tr>    <tr>    <td><b>Y<sub>2</sub>:</b></td>    <td>{{form.y2}}</td>    <td></td>    <td><input type="submit" value="保存"/></td>    </tr>    </tbody>    </table>    </form></div><div style="clear:left;"></div></div></body></html>

forms.py:

#coding=utf-8from django import formsclass PhotoForm(forms.Form):    photo_name = forms.ImageField(label=u"头像")     class HatHeadCutForm(forms.Form):    x1=forms.IntegerField(widget=forms.TextInput(attrs={'size': 4,}))    y1=forms.IntegerField(widget=forms.TextInput(attrs={'size': 4,}))    x2=forms.IntegerField(widget=forms.TextInput(attrs={'size': 4,}))        y2=forms.IntegerField(widget=forms.TextInput(attrs={'size': 4,}))    w=forms.IntegerField(widget=forms.TextInput(attrs={'size': 4,}))    h=forms.IntegerField(widget=forms.TextInput(attrs={'size': 4,}))

models.py:

#coding=utf-8from django.db import modelsclass Photo(models.Model):    photo_name=models.CharField(u"图片路径",max_length=255)    photo_thumb=models.CharField(u"图片缩略图",max_length=255)

views.py:

#coding=utf-8from django.core.urlresolvers import reversefrom django.shortcuts import render_to_response, get_object_or_404from django.http import HttpResponse,HttpResponseRedirectfrom django.template import RequestContextfrom django.contrib import messagesimport os,uuid,ImageFile,Imagefrom PhotoCut.headhat.forms import PhotoForm,HatHeadCutFormfrom PhotoCut.headhat.models import Photofrom PhotoCut.settings import MEDIA_ROOT,HEADHAT_ABS_PATH,HEADHAT_VIR_PATHdef index(request,templates="headhat/index.html"):    template_var={}    form=PhotoForm()    if request.method=="POST":        form = PhotoForm(request.POST.copy(),request.FILES)        if form.is_valid():            file=request.FILES.get("photo_name",None)            if file:                p=ImageFile.Parser()                for c in file.chunks():                    p.feed(c)                img=p.close()                                if img.mode != 'RGBA':                    img = img.convert('RGBA')                if img.size[0]>img.size[1]:                    offset=int(img.size[0]-img.size[1])/2                    img=img.crop((offset,0,int(img.size[0]-offset),img.size[1]))                else:                    offset=int(img.size[1]-img.size[0])/2                    img=img.crop((0,offset,img.size[0],(img.size[1]-offset)))                img.thumbnail((300, 300))                                file_name="%s.jpg"%str(uuid.uuid1())                img.save(os.path.join(HEADHAT_ABS_PATH,file_name),"JPEG",quality=100)                messages.info(request,u"上传成功！")                p=Photo.objects.create(photo_name=file_name)                p.save()                return HttpResponseRedirect(reverse("headhat_cut",kwargs={"id":p.id}))                    template_var["form"]=form    return render_to_response(templates,template_var,context_instance=RequestContext(request))def cut(request,id,templates="headhat/cut.html"):    template_var={}    p=get_object_or_404(Photo,pk=int(id))            if not p.photo_name:        messages.info(request,u"请先上传图片！")        return HttpResponseRedirect(reverse("headhat_index"))            template_var["vir_path"]=os.path.join(HEADHAT_VIR_PATH,p.photo_name)            form=HatHeadCutForm()    if request.method=='POST':        form=HatHeadCutForm(request.POST)        if form.is_valid():                        try:                img=Image.open(os.path.join(HEADHAT_ABS_PATH,p.photo_name))                            except IOError:                messages.info(request,u"读取文件错误！")                            data=form.cleaned_data            img=img.crop((data["x1"],data["y1"],data["x2"],data["y2"]))            img.thumbnail((50, 50))            file_name="%s_%s"%(os.path.splitext(p.photo_name)[0],"_50_50.jpg")                        img.save(os.path.join(HEADHAT_ABS_PATH,file_name),"JPEG",quality=100)                        p.photo_thumb=file_name            p.save()                                 messages.info(request,u"剪切成功！")            return HttpResponseRedirect(reverse("headhat_show"))        else:            messages.info(request,u"请剪切后 再保存！")    template_var["form"]=form    return render_to_response(templates,template_var,context_instance=RequestContext(request))def show(request,templates="headhat/show.html"):    template_var={}    photos=Photo.objects.all()    template_var["path"]=HEADHAT_VIR_PATH    template_var["photos"]=photos    return render_to_response(templates,template_var,context_instance=RequestContext(request))

参考:http://2goo.info/blog/panjj/Django/2010/03/12/34