首页
所有分类
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命令行传递实例化对象的方法
Nov 02 Python
浅谈numpy数组中冒号和负号的含义
Apr 18 Python
Python中pandas模块DataFrame创建方法示例
Jun 20 Python
python实现泊松图像融合
Jul 26 Python
详解PyCharm+QTDesigner+PyUIC使用教程
Jun 13 Python
用Cython加速Python到“起飞”(推荐)
Aug 01 Python
Python简易计算器制作方法代码详解
Oct 31 Python
pytorch中torch.max和Tensor.view函数用法详解
Jan 03 Python
keras tensorflow 实现在python下多进程运行
Feb 06 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
Jul 30 Python
Python将QQ聊天记录生成词云的示例代码
Feb 10 Python
python之django路由和视图案例教程
Jul 26 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
鸿蒙(2) 蓝牙(1) xhunter1.sys(1) Debian(1) 鸿蒙3.0(1) 蓝牙耳机(1) RustDesk(1) 华为(1) HarmonyOS(1) 虚拟键盘(1)
You might like
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
理解javascript闭包
2015/12/15 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
layer插件select选中默认值的方法
2018/08/14 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python引用（import）文件夹下的py文件的方法
2014/08/26 Python
Python socket编程实例详解
2015/05/27 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
澳大利亚百货公司：David Jones
2018/02/08 全球购物
希腊品牌鞋类销售网站：epapoutsia.gr
2020/03/18 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
音乐专业应届生教师求职信
2013/11/04 职场文书
园艺师求职信
2014/04/27 职场文书
竞选班委演讲稿
2014/04/28 职场文书
关于运动会的口号
2014/06/07 职场文书
校运会口号
2014/06/18 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
芙蓉镇观后感
2015/06/10 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
详解如何使用Nginx解决跨域问题
2022/05/06 Servers