Home > Others

The implementation method of Django Imgareaselect manual shearing Head

Source: Internet
Author: User
Tags manual join min uuid
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article describes the Django Imgareaselect manual clipping head method. Share to everyone for your reference. Specifically as follows:

Index.html:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17-18 <! DOCTYPE html>

Show.html:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <! DOCTYPE html>

Cut.html:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 &lt;! DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset= "UTF-8" &gt; &lt;title&gt; cut &lt;/title&gt; &lt;link rel= " Stylesheet "type=" Text/css "href="/static/jquery.imgareaselect-0.9.3/css/imgareaselect-default.css "/&gt; &lt; Style rel= "stylesheet" type= "Text/css" &gt; Area {background:none Repeat scroll 0 0 #EEEEFF; border:2px solid #DDDDEE P Adding: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;} &L t;/style&gt; &lt;script type= "Text/javascript" src= "js/jquery.min.js" &gt;&lt;/script&gt; &lt;script type= "text/" JavaScript "src=" Js/jquery.imgareaselect.min.js "&gt;&lt;/script&gt; &lt;script type=" Text/javascript "&gt; function Preview (IMG, selection) {if (!selection.width | |!selection.height) return; var ScaleX = 100/selection.width; var scale Y = 100/selection.height; $ (' #preview img '). CSS ({width:Math.round (ScaleX *), Height:Math.round (ScaleY *), 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 (m); $ (' #id_y1 '). Val (m); $ (' #id_x2 '). val; $ (' #id_y2 '). Val (' #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}); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h3&gt; avatar Shearing &lt;a href= "{%url headhat_index%}" &gt;&lt;b&gt; return &lt;/b &gt;&lt;/a&gt; &lt;/h3&gt; {% If messages%} {% for message in messages%} &lt;p{% if message.tags%} class= ' {{Message.ta GS}} ' {% endif%}&gt;{{message}}&lt;/p&gt; {% endfor%} {% endif%} &lt;div class= ' area ' &gt; &lt;div style= ' float:left; width:45%; " &gT &lt;p class= "Instructions" &gt; click on the original to select the shear area &lt;/p&gt; &lt;div style= "margin:0pt 0.3em; width:300px; height:300px "class=" Frame "&gt; &lt;img src=" {{Vir_path}} "id=" Photo "alt="/&gt; "&lt;/div&gt; &lt;/div&gt; &lt;div Style= "Float:left; width:40%; padding-top:50px; " &gt; &lt;p style= "font-size:110%; Font-weight:bold; Padding-left:0.1em; " &gt; Preview Select area &lt;/p&gt; &lt;div style= "margin:0pt 1em; width:100px; height:100px, "class=" Frame "&gt; &lt;div style=" width:100px; height:100px; Overflow:hidden, "id=" Preview "&gt; &lt;img style=" WIDTH:244PX; height:244px; Margin-left: -71px; Margin-top: -54px "src=" {{Vir_path}} "alt="/&gt; &lt;/div&gt; &lt;/div&gt; &lt;form action= "" method= "POST" &gt;{% Csrf_token%} &lt;table style= "MARGIN-TOP:1EM;" &gt; &lt;thead&gt; &lt;tr&gt; &lt;th style= "font-size:110%; Font-weight:bold; Text-align:left; padding-left:0.1em; "colspan=" 2 "&gt; Shearing coordinates &lt;/th&gt; &lt;th style=" font-size:110%; Font-weight:bold; Text-align:left; Padding-left:0.1em; "colspan=" 2 "&gt; Shearing size &lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td style=" width:10%; " &gt;&lt;b&gt;X&lt;sub&gt;1&lt;/sub&gt;:&lt;/b&gt;&lt;/td&gt; &lt;td style= "width:30%;" &gt;{{form.x1}}&lt;/td&gt; &lt;td style= "width:20%;" &gt;&lt;b&gt; width:&lt;/b&gt;&lt;/td&gt; &lt;td&gt;{{form.w}}&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;b&gt;y &lt;sub&gt;1&lt;/sub&gt;:&lt;/b&gt;&lt;/td&gt; &lt;td&gt;{{form.y1}}&lt;/td&gt; &lt;td&gt;&lt;b&gt; Height:&lt;/b&gt; &lt;/td&gt; &lt;td&gt;{{form.h}}&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;b&gt;x&lt;sub&gt;2&lt;/sub&gt;: &lt;/b&gt;&lt;/td&gt; &lt;td&gt;{{form.x2}}&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt; tr&gt; &lt;td&gt;&lt;b&gt;Y&lt;sub&gt;2&lt;/sub&gt;:&lt;/b&gt;&lt;/td&gt; &lt;td&gt;{{form.y2}}&lt;/td&gt; &LT;TD &gt;&lt;/td&gt; &lt;td&gt;&lt;input type= "Submit" value= "save"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table &gt; &lt;/form&gt; &lt;/div&gt; &lt;div style= "clear:left;" &gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

forms.py:

?

1 2 3 4 5 6 7 8 9 10 11 #coding =utf-8 from Django Import Forms Class Photoform (forms. Form): Photo_name = forms. ImageField (label=u "Avatar") 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:

?

1 2 3 4 5 #coding =utf-8 from django.db Import models Class Photo (models. Model): Photo_name=models. Charfield (U "Picture path", max_length=255) photo_thumb=models. Charfield (u "thumbnail image", max_length=255)

views.py:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72-73 #coding =utf-8 from django.core.urlresolvers import reverse to django.shortcuts import Render_to_response, get_object_ or_404 from django.http import httpresponse,httpresponseredirect to 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]&gt;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 (()) file_name= "%s.jpg"%str ( UUID.UUID1 ()) Img.save (Os.path.join (Headhat_abs_path,file_name), "JPEG", quality=100) messages.info (request,u "Upload success!") ") 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 "Please upload the picture First!") ") 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 read file Error!) ") Data=form.cleaned_data Img=img.crop (data["x1"],data["y1"],data["x2"],data["y2"]) Img.thumbnail (()) 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 "cut success!") ") return Httpresponseredirect (Reverse (" headhat_show ")) Else:messages.info (request,u" Please cut and save! ") ") 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))

I hope this article will help you with your Python programming.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
implementation of data structures function of r w head implementation of ajax in php signature of method function of method method of sending email comparison of master data management implementation styles

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More