suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  Django imgareaselect手动剪切头像实现方法

Django imgareaselect手动剪切头像实现方法

WBOY
WBOYOriginal
2016-06-06 11:17:571250Durchsuche

本文实例讲述了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程序设计有所帮助。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Python使用xlrd模块操作Excel数据导入的方法Nächster Artikel：详解详解Python中writelines()方法的使用

In Verbindung stehende Artikel

Mehr sehen