Home > Article > Backend Development > Django imgareaselect手动剪切头像实现方法
Django imgareaselect手动剪切头像实现方法
- WBOYOriginal
- 2016-06-06 11:17:571249browse
本文实例讲述了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="js/jquery.min.js"></script>
<script type="text/javascript" src="js/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="max-width:90%" 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))
希望本文所述对大家的Python程序设计有所帮助。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Python使用xlrd模块操作Excel数据导入的方法Next article：详解详解Python中writelines()方法的使用