前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切
之前一直使用python的PIL自定义裁切图片，今天有需求需要做一个前端的选择预览页面，索性就把这个功能整理一下，分享给大家。
实现思路：
1、前端页面：
用户选择本地一张图片，然后通过鼠标缩放和移动，确定自己所需要的图片切块，最终把图片切块的 左边距，上边距，长，宽这些个参数传给后台
2、后台：
使用的django，主要实现2部分的功能，第一：图片上传，第二：图片裁切
先看一张图片：
前端页面：
后台最后得到的图片：
对于该demo中，我用到了以下js插件：
jquery-webox：弹出图层（你可以不关心）
jcrop：在线裁切预览图片 http://deepliquid.com/content/Jcrop_Implementation_Theory.html
jquery.uploadify：上传附件
html页面：
a)用户信息页面:userinfo.html
b)弹出页面用于用户选择、上传、预览图片：index.html
django程序:
UploadImage模块下有以下几个文件：
c)urls.py
d)views.py
下面就开始贴代码了
a)的代码：
{% extends "kidcrate/base.html" %}
{%block contentBar%}
<link href="/site_media/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/site_media/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="/site_media/js/thickbox.js"></script>
<link rel='stylesheet' type='text/css' href='/site_media/css/thickbox.css' />
<link href="/site_media/common/jquery_webox/jquery-webox.css" rel="stylesheet" type="text/css">
<script src="/site_media/common/jquery_webox/jquery-webox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//iframe弹出层调用
$('#outside').click(function(){
$.webox({
height:500,
width:800,
bgvisibel:true,
title:'修改头像',
iframe:'/uploadify?uuid='+$('#uuid').val()+'&rd='+Math.random()
});
});
})
</script>
<DIV class="yyh-page grid_9">
<DIV class=widget>
<DIV class=widget-content>
<!-- basic form -->
<FORM id=basic class="yyh-form tabs-rel tabs-info on" method=post
action="/account/userinfo/">
<input type="hidden" id="uuid" name="uuid" value="{{uuid}}" />
<DL class=required>
<DT>
<LABEL for=producer>
账号
</LABEL>
</DT>
<DD>
<INPUT class=inputText style="color: #400080;font - size: 16px;" readonly="true" value="{{username}}">
<SPAN>
<B class=error>
</B>
</SPAN>
<P class=hint>
</P>
</DD>
<DT>
<LABEL for=producer>
联系人真实姓名
</LABEL>
</DT>
<DD>
<INPUT class=inputText name=devName value="{{devName}}">
<SPAN>
<B class=error>
</B>
</SPAN>
<P class=hint>
</P>
</DD>
</DL>
<DL class=required>
<DT>
<LABEL for=phone>
联系电话
</LABEL>
</DT>
<DD>
<INPUT class=inputText name=contactPhone value="{{contactPhone}}">
<SPAN>
<B class=error>
</B>
</SPAN>
<P class=hint>
</P>
</DD>
</DL>
<DL class=required>
<DT>
<LABEL for=address>
联系地址
</LABEL>
</DT>
<DD>
<INPUT class=inputText name=contactAddress value="{{contactAddress}}">
<SPAN>
<B class=error>
</B>
</SPAN>
<P class=hint>
请填写真实的联系地址
</P>
</DD>
</DL>
<DL class=required>
<DT>
<LABEL for=zipcode>
邮政编码
</LABEL>
</DT>
<DD>
<INPUT class="inputText NumberValidate" name=contactZipCode value="{{contactZipCode}}">
<SPAN>
<B class=error>
</B>
</SPAN>
</DD>
</DL>
<DL>
<DT>
<LABEL for=headimg>
头像
</LABEL>
</DT>
<DD>
<img id="screenshot_img" name="screeshot_img" src="/site_media/images/account_head/femail.jpg" width="120" height="120" /><br><br/>
<div id="upload_div" style="display:visible;">
<a class="Button blueButton Button18" href="javascript:void(0);" id="outside"><strong>点我修改</strong></a>
</div>
</DD>
</DL>
<DL class=submit>
<DT>
</DT>
<DD>
<INPUT class="inputSubmit blue" value=保存 type=button onclick="this.form.submit();
">
</DD>
</DL>
</FORM>
<!-- end of basic form -->
</DIV>
</DIV>
</DIV>
{%endblock%}"
b)的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Django下利用Uploadify组件上传图片</title>
<link rel="stylesheet" href="/site_media/jcrop/demos/demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="/site_media/jcrop/demos/demo_files/demos.css" type="text/css" />
<link rel="stylesheet" href="/site_media/jcrop/css/jquery.Jcrop.css" type="text/css" />
<script src="/site_media/jcrop/js/jquery.min.js"></script>
<script src="/site_media/jcrop/js/jquery.Jcrop.js"></script>
<script type="text/javascript">
var img_top_margin,img_left_margin,img_width,img_height;//最后使用的2个变量
jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
topw,
leftw,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init',[xsize,ysize]);
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
console.log("new width:"+Math.round(rx * boundx) );
console.log("new height:"+Math.round(ry * boundy) );
console.log("marginTop:"+Math.round(ry * c.y));
console.log("marginLeft:"+Math.round(rx * c.x));
img_top_margin=c.y;
img_left_margin=c.x;
img_width=c.w;
img_height=c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
});
</script>
<link href="/site_media/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/site_media/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/site_media/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript" charset="utf-8" async defer>
function go() {
alert(2);
}
function replace_image(flag,path,uuid) {
console.log("==========replace_image=======");
console.log("marginTop:"+img_top_margin);
console.log("marginLeft:"+img_left_margin);
console.log("width:"+img_width);
console.log("height:"+img_height);
var params="&marginTop="+img_top_margin+"&marginLeft="+img_left_margin+"&width="+img_width+"&height="+img_height;
$.ajax({
type: "GET",
url: "?replace_flag="+flag+"&savepath="+path+params,
dataType: "json",
success: function (json) {
alert(json.message);
//document.getElementById("btnquery").click();
document.getElementById("echo_href_msg").innerHTML = json.message;
}
})
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/site_media/uploadify/uploadify.swf',
'script' : '{%url uploadify_script %}',
'cancelImg' : '/site_media/uploadify/cancel.png',
'folder' : '/upload',
'auto' : false,//
'multi': true,//设置可以上传多个文件
'queueSizeLimit':20,//设置可以同时20个文件
'removeCompleted':false,//
'sizeLimit':10240000,//设置上传文件大小单位kb
'fileExt':'*.jpg;*.gif;*.png',//设置上传文件类型为常用图片格式
'fileDesc':'Image Files',
'onInit': function () {},
'onError' : function (event,ID,fileObj,errorObj) {
$('#id_span_msg').html("上传失败，错误码:"+errorObj.type+" "+errorObj.info);
},
'onSelect': function (e, queueId, fileObj) {
$('#id_span_msg').html("");
},
'onAllComplete': function (event, data) {
if(data.filesUploaded>=1){
$('#id_span_msg').html("上传成功！");
}
}
});
});
</script>
<style type="text/css">
/* Apply these styles only when #preview-pane has
been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -280px;
padding: 6px;
border: 1px rgba(0,0,0,.4) solid;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
/* The Javascript code will set the aspect ratio of the crop
area based on the size of the thumbnail preview,
specified here */
#preview-pane .preview-container {
width: 180px;
height: 180px;
overflow: hidden;
}
</style>
</head>
<body>
<h1>请选择图片上传</h1>
<div class="demo-box">
<form action="." method="post" enctype="multipart/form-data">{% csrf_token %}
<input type="file" name="Filedata"/>
<input type="submit" value="上传"/> {%if message%}{{message}}{%endif%}
{% ifequal upload_flag 1 %}
<img id="target" src="/site_media/upload/tmp/{{savepath}}"/>
<div id="preview-pane">
<div class="preview-container">
<img src="/site_media/upload/tmp/{{savepath}}" class="jcrop-preview" alt="Preview" />
</div>
</div>
<br/><br/>
<div id="echo_href_msg" >
<a href="#" onclick="replace_image('1','{{savepath}}');" >你确定要替换原来的图片?</a>
</div>
{%endifequal%}
</form>
</div>
<!--
<p></p>
<h1>Uploadify组件上传方式</h1>
<div class="demo-box">
<input id="file_upload" type="file" name="Filedata">
<div id="file_uploadQueue" class="uploadifyQueue"></div>
<p><a href="javascript:$('#file_upload').uploadifyUpload()">上传图片</a>
<a href="javascript:$('#file_upload').uploadifyClearQueue()">取消上传</a>
</p>
<p><span id="id_span_msg"></span></p>
//-->
</div>
</body>
</html>
c)的代码：
from django.conf.urls.defaults import patterns, url
urlpatterns = patterns('xue_wan_le.UploadImage.views',
url(r'^$', 'index', name='uploadify'),
url(r'^index/', 'index',name="uploadify_index"),
url(r'^uploadify_script/', 'uploadify_script',name="uploadify_script"),
)
d)的代码：
#coding=utf-8
from django.http import HttpResponse
from django.template import RequestContext
from django.shortcuts import render_to_response
import os,ImageFile,uuid,shutil
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
from django.utils import simplejson
from xue_wan_le.Common.CookieUtil import CookieUtil
def index(request):
ctx=dict()
uuid=''
marginTop=0
marginLeft=0
width=0
height=0
if request.GET.get('marginTop'):
marginTop=int(request.GET.get('marginTop'))
if request.GET.get('marginLeft'):
marginLeft=int(request.GET.get('marginLeft'))
if request.GET.get('width'):
width=int(request.GET.get('width'))
if request.GET.get('height'):
height=int(request.GET.get('height'))
if request.GET.get('uuid'):
uuid=request.GET.get('uuid')
print '===uuid:'+request.GET.get('uuid')
request.session['replace_site_icon_uuid'] = uuid#保存UUID
if request.GET.get('replace_flag'):
filepath=request.GET.get('savepath')
olduuid=request.session['replace_site_icon_uuid']
print '===filepath:'+filepath
print '===olduuid:'+olduuid
print '====uuid:'+uuid
path=os.path.join(settings.MEDIA_ROOT,settings.SOURCE_IMAGE_TMP)
if filepath and olduuid:
if os.path.isfile(os.path.join(path,filepath)):
#先把新文件，换成旧文件名字
try:
print 'olduuid:'+olduuid
newname=os.path.join(settings.MEDIA_ROOT,settings.SOURCE_IMAGE_TMP,olduuid+'.jpg')
print 'newname:'+newname
os.rename(os.path.join(path,filepath),newname)
#覆盖
shutil.move(os.path.join(settings.MEDIA_ROOT,settings.SOURCE_IMAGE_TMP,olduuid+'.jpg'),
os.path.join(settings.MEDIA_ROOT,'urls','sitethumbs',olduuid+'.jpg'))
#裁切
try:
from PIL import Image
path=os.path.join(settings.MEDIA_ROOT,'urls','sitethumbs',olduuid+'.jpg')
f = Image.open(path)
xsize,ysize=f.size
print 'image size:'+str(xsize)+":"+str(ysize)
#box变量是一个四元组(左，上，右，下)。
box=(marginLeft,marginTop,marginLeft+width,marginTop+height)
print box
print '----1'
f.crop(box).save(path)
print '----2'
print 'crop image:'+path
except Exception,e:
print e
return HttpResponse(simplejson.dumps({'message':'替换成功,关闭窗口'}))
except Exception,e:
print e
else:
print 'error.=='
if request.method=="POST":
file = request.FILES.get("Filedata",None)
(upload_flag,savepath)=_upload(file)
if upload_flag:
ctx["message"]=u"上传成功！"
ctx["upload_flag"]=1
else:
ctx["message"]=u"上传出错！"
ctx["upload_flag"]=0
ctx["savepath"]=savepath
return render_to_response("uploadpic/index.html",ctx,RequestContext(request))
@csrf_exempt
def uploadify_script(request):
response=HttpResponse()
response['Content-Type']="text/javascript"
ret="0"
file = request.FILES.get("Filedata",None)
if file:
if _upload(file):
ret="1"
ret="2"
response.write(ret)
return response
def _upload(file):
'''图片上传函数'''
if file:
path=os.path.join(settings.MEDIA_ROOT,settings.SOURCE_IMAGE_TMP)
if not os.path.exists(path): #如果目录不存在创建目录
os.makedirs(path)
file_name=str(uuid.uuid1())+".jpg"
path_file=os.path.join(path,file_name)
parser = ImageFile.Parser()
for chunk in file.chunks():
parser.feed(chunk)
img = parser.close()
try:
if img.mode != "RGB":
img = img.convert("RGB")
img.save(path_file, 'jpeg',quality=100)
print 'img.save:'+path_file
except Exception,e:
print e
return (False,"")
return (True,file_name)
return (False,"")
index.html和view.py是功能实现的主要部分，如果有疑问可以发评论给我，或者新浪微博私信给我http://weibo.com/changeself
