Django imgareaselect 手动剪切头像

最新推荐文章于 2024-06-13 10:06:41 发布

NavCat

最新推荐文章于 2024-06-13 10:06:41 发布

阅读量1.6k

点赞数

分类专栏： Django Python jQuery 文章标签： django templates import path stylesheet class

本文链接：https://blog.csdn.net/yima1006/article/details/7240879

版权

Python 同时被 3 个专栏收录

28 篇文章 1 订阅

订阅专栏

Django

14 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

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-8
from django import forms

class 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-8
from django.db import models

class Photo(models.Model):
    photo_name=models.CharField(u"图片路径",max_length=255)
    photo_thumb=models.CharField(u"图片缩略图",max_length=255)

views.py:

#coding=utf-8
from django.core.urlresolvers import reverse
from django.shortcuts import render_to_response, get_object_or_404
from django.http import HttpResponse,HttpResponseRedirect
from django.template import RequestContext

from django.contrib import messages
import os,uuid,ImageFile,Image

from PhotoCut.headhat.forms import PhotoForm,HatHeadCutForm
from PhotoCut.headhat.models import Photo

from PhotoCut.settings import MEDIA_ROOT,HEADHAT_ABS_PATH,HEADHAT_VIR_PATH

def 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

NavCat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django imgareaselect 手动剪切头像

Django imgareaselect 手动剪切头像代码如下： index.html:上传图片{% csrf_token %} {{form.as_table}} show.html:
复制链接

扫一扫

专栏目录