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

2024-09-28 09:06:04

本文实例讲述了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程序设计有所帮助。

利用jQuery插件imgAreaSelect实现获得选择域的图像信息

还是先来分析一下: (以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的) 如何获得选择域的图像信息? 其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少? 把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了. (我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形)) 大小: 这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小.(这个应该不难) 位置: 1.假设我们只告诉计算机,这个选择区域一
利用imgareaselect辅助后台实现图片上传裁剪

因为项目当中用到图片裁剪,本来可以不用到后台进行裁剪的,但是要兼容万恶的IE浏览器,所以不得不使用后台进行裁剪. 这次使用到imgareaselect插件获取需要裁剪区域的坐标,再由后台进行裁剪操作.先上个效果图再说但是这里有一个坑就是上传的图片过大,可能会造成裁剪的区域跟插件中显示的不一样,所以得现在后台对云图片进行压缩在裁剪. /** * 等比例压缩算法: * 算法思想:根据压缩基数和压缩比来压缩原图,生产一张图片效果最接近原图的缩略图 * @param srcURL 原图地址 * @pa
利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果. 3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ［"区域":是宽*高,也就是面积:] ［"放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数］一.怎么能放大或者缩小图片的局部?
php结合imgareaselect实现图片裁剪

引用CSS /js/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css 引用js /js/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.min.js /js/AjaxFileUploaderV2.1/ajaxfileupload.js html <div> <img src='blank.jpg' id="mainimg"> <
利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）

<body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images
javascript截图 jQuery插件imgAreaSelect使用详解

为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能. 一,准备: 两个JS文件 1,jq
imgAreaSelect 中文文档帮助说明

一.技术文档 1.介绍 ImgAreaSelect是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,非常的fashion.另外,可以在这个选择图像区域的基础上应用网站的其他一些技术,比如图片拖曳.图片编辑等. 2.基本用法这个插件基于jQuery上通过imgAreaSelect()方法来调用,它操作的对象是HTML中<img>元素内的图像. 复制代码代码如下: <script type="text/javascript"> $(document)
jquery imgareaselect 使用利用js与程序结合实现图片剪切

复制代码代码如下: /* 缺陷,当前在ff3下,用jquery的 width()与height()函数,在不设置图片的宽度与高度的时候,不能取到需要在图片load函数里面初始化才可以 */ sanshi_imgareaselect = function(pic_id,view_div_id){ this.pic_obj = jQuery("#"+pic_id); this.pic_width; this.pic_height; this.view_d
Django imgareaselect手动剪切头像实现方法

本文实例讲述了Django imgareaselect手动剪切头像的方法.分享给大家供大家参考.具体如下: index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上传图片</title> </head> <body> <form action="." method="
Python中使用django form表单验证的方法

一. django form表单验证引入有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form</title> </head> <body> <div> <for
Django在Ubuntu14.04的部署方法

第一步. sudo apt-get update sudo apt-get upgrade 先更新.. Django的主流部署方式:nginx+uwsgi+django 第二步,安装nginx sudo apt-get install nginx 安装nginx,如果需要安装最新的nginx需从官网下载源码包进行手动编译. nginx的大致文件结构. 1.配置文件:/etc/nginx 2.程序:/usr/sbin/nginx 3.日志:/var/log/nginx/access.log - e
django 实现手动存储文件到model的FileField

通过POST请求,上传了文件,想要将文件存储在模型的FileField中 request.FILES中的值均为UploadedFile类文件对象表单上传的文件对象存储在类字典对象request.FILES中,表单格式需为multipart/form-data FieldFile.save(name, content, save=True) name:命名文件名 content:必须是django.core.files.File或django.core.files.base.ContentFil
Django使用redis配置缓存的方法

对于非经常更新的服务器数据,若每次都从硬盘读取一次,会浪费服务器资源.拖慢响应速度,而且数据更新频率较高,服务器负担比较大.若保存到数据库,还需要额外建立一张对应的表存储数据.一个更好的方法是在Django中使用Redis进行缓存,下面通过本文给大家介绍Django使用redis配置缓存的方法. 前言动态网站的基本权衡是,它们是动态的.每次用户请求页面时,Web服务器都会进行各种计算 - 从数据库查询到模板呈现再到业务逻辑 - 以创建站点访问者看到的页面.从处理开销的角度来看,这比标准的文
django中操作mysql数据库的方法

目录 1.准备工作(django连接数据库) 2.django操作数据库(ORM) 2.1 ORM简介 2.2 创建表和字段 2.3 字段的增删改查 2.4 单表数据的增删改查 2.4.1单表数据的查询 2.4.2单表数据的增加 2.4.3单表数据的修改 2.4.4单表数据删除 2.4.5补充13条单表查询 2.4.6 神奇的双下划线查询 2.5 多表数据操作 2.5.1 orm创建表关系 2.5.2 一对多关系的增删改 2.5.3 多对多关系的增删改 2.5.4 多表的查询操作 2.6 字段类
AngularJS使用angular.bootstrap完成模块手动加载的方法分析

本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法.分享给大家供大家参考,具体如下: 之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <head> <script src="angular.js"></script> <script> // 创建moudle1
浅谈django model的get和filter方法的区别(必看篇)

django的get和filter方法是django model常用到的,搞清楚两者的区别非常重要. 为了说明它们两者的区别定义2个models class Student(models.Model): name = models.CharField('姓名', max_length=20, default='') age = models.CharField('年龄', max_length=20, default='') class Book(models.Model): student =
Python使用django获取用户IP地址的方法

本文实例讲述了Python使用django获取用户IP地址的方法.分享给大家供大家参考.具体如下: 函数实现: def get_client_ip(request): try: real_ip = request.META['HTTP_X_FORWARDED_FOR'] regip = real_ip.split(",")[0] except: try: regip = request.META['REMOTE_ADDR'] except: regip = "" r
OneinStack一键安装PHP/JAVA/HHVM和超详细的VPS手动安装LNMP的方法

继著名的LAMP Stack(Linux + Apache + MySQL/MariaDB + PHP)网站环境之后,LNMP Stack(Linux + Nginx + MySQL/MariaDB + PHP)以其负载小.静态文件处理能力强的优势,在Linux平台上开始流行,尤其是在配置不太高的VPS上应用广泛. 说起LNMP,多数人应该知道lnmp.org站长开发的LNMP一键安装包,该脚本虚拟主机管理.FTP用户管理.Nginx.MySQL/MariaDB.PHP的升级.常用缓存组件的安装

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

相关推荐

随机推荐