首頁 > 後端開發 > Python教學 > Django imgareaselect手动剪切头像实现方法

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-06-06 11:17:57
原創
1320 人瀏覽過

本文实例讲述了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="/static/imghw/default1.png"  data-src="{{path}}{{p.photo_name}}"  class="lazy" alt="big"/><br/>

    <img src="/static/imghw/default1.png"  data-src="{{path}}{{p.photo_thumb}}"  class="lazy" 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="/static/imghw/default1.png"  data-src="{{vir_path}}"  class="lazy" 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 src="/static/imghw/default1.png"  data-src="{{vir_path}}"  class="lazy"    style="max-width:90%" 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程序设计有所帮助。

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板