通过本文主要向大家介绍了imgareaselect,jquery.imgareaselect,imgareaselect插件,手动挡车驾驶技巧,手动叉车等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实例讲述了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>
</div>
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>
</div>
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>
</div>
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,}))
</div>
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)</div>
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.POS