首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

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

Posted in Python onMay 26, 2015

本文实例讲述了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 imgareaselect手动剪切头像实现方法

- Author -

NavCat

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
聊聊Python中的pypy
Jan 12 Python
pandas的object对象转时间对象的方法
Apr 11 Python
对python append 与浅拷贝的实例讲解
May 04 Python
基于Python pip用国内镜像下载的方法
Jun 12 Python
利用python对Excel中的特定数据提取并写入新表的方法
Jun 14 Python
浅谈PYTHON 关于文件的操作
Mar 19 Python
python求最大值最小值方法总结
Jun 25 Python
使用python将mysql数据库的数据转换为json数据的方法
Jul 01 Python
简单了解python关系（比较）运算符
Jul 08 Python
Python笔记之观察者模式
Nov 20 Python
Keras load_model 导入错误的解决方式
Jun 09 Python
python如何利用cv2模块读取显示保存图片
Jun 04 Python
Django实现图片文字同时提交的方法
May 26 #Python
Python实现的简单算术游戏实例
May 26 #Python
Django中使用group_by的方法
May 26 #Python
python3序列化与反序列化用法实例
May 26 #Python
python实现用于测试网站访问速率的方法
May 26 #Python
Python函数可变参数定义及其参数传递方式实例详解
May 25 #Python
Python易忽视知识点小结
May 25 #Python
死亡搁浅(1) 吸血鬼(1) 战锤40K(1) LOL(1) 大话西游(1) 绿林侠盗(1) 模拟人生(1) 铁拳(1) 东方异文石(1) 遗弃(1)
You might like
PHP常用代码
2006/11/23 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串，超时无法还原)
2010/04/28 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
js 对象是否存在判断
2009/07/15 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
初识Node.js
2015/03/20 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
JavaScript入门基础
2015/08/12 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python3.7调试的实例方法
2020/07/21 Python
8种常用的Python工具
2020/08/05 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
python爬取youtube视频的示例代码
2021/03/03 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
为女性购买传统的印度服装和婚纱：Kalkifashion
2019/07/22 全球购物
个人自荐信
2013/12/05 职场文书
银行介绍信范文
2014/01/10 职场文书
公证委托书大全
2014/04/04 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
干部理论学习心得体会
2016/01/21 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python