首页
所有分类
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 tempfile模块学习笔记（临时文件）
May 25 Python
Python-基础-入门 简介
Aug 09 Python
再谈Python中的字符串与字符编码（推荐）
Dec 14 Python
django 常用orm操作详解
Sep 13 Python
Django 登陆验证码和中间件的实现
Aug 17 Python
对Python3+gdal 读取tiff格式数据的实例讲解
Dec 04 Python
pycharm内无法import已安装的模块问题解决
Feb 12 Python
Windows 下python3.8环境安装教程图文详解
Mar 11 Python
安装并免费使用Pycharm专业版(学生/教师)
Sep 24 Python
Python Django路径配置实现过程解析
Nov 05 Python
python中Pyqt5使用Qlabel标签播放视频
Apr 22 Python
Python按顺序遍历并读取文件夹中文件
Apr 29 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
 AD域(1) lamp(1) Centos(8) 伪静态(1) Rewrite(4) 跨域(4) URL重定向(3) 组策略(1) lnmp(1) destoon(1)
You might like
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
js兼容的placeholder属性详解
2013/08/18 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
js opener的使用详解
2014/01/11 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python 文件读写操作实例详解
2014/03/12 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
python 实现生成均匀分布的点
2019/12/05 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
Oroton中国官网：澳洲知名奢侈配饰品牌
2017/03/26 全球购物
伦敦哈德森鞋：Hudson Shoes
2018/02/06 全球购物
村官工作鉴定评语
2014/01/27 职场文书
中专自我鉴定
2014/02/05 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
活动倡议书范文
2014/05/13 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
员工工作表扬信
2015/05/05 职场文书
道歉情书大全
2015/05/12 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers