本文實例講述了Django imgareaselect手動剪切頭像的方法。分享給大家供大家參考。具體如下：
index.html:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!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:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!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:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 <!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:
?
1 2 3 4 5 6 7 8 9 10 11 #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:
?
1 2 3 4 5 #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:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 #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程序設計有所幫助。
