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

153 阅读 0 评论 101 点赞

我是靠谱客的博主俊秀缘分，最近开发中收集的这篇文章主要介绍Django imgareaselect手动剪切头像实现方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了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="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))

希望本文所述对大家的Python程序设计有所帮助。