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

2019-11-25 17:22:37

字体：大中小

来源：转载

供稿：网友

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

上一篇：django实现分页的方法

下一篇：Django实现图片文字同时提交的方法