萬盛學電腦網 >> 網絡編程 >> 編程語言綜合 >> Django imgareaselect手動剪切頭像實現方法
Django imgareaselect手動剪切頭像實現方法
本文實例講述了Django imgareaselect手動剪切頭像的方法。分享給大家供大家參考。具體如下：
index.html:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!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:
?
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 <!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:
?
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 43 44 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 84 85 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 119 120 121 122 123 <!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- 上一頁:Django實現圖片文字同時提交的方法
- 下一頁:django實現分頁的方法
編程語言綜合排行
程序編程推薦
相關文章
- 我也有微信朋友圈了 Android實現
- Linux系統下glibc導致kernel panic的問題修復方法
- divcssimportant會被IE忽略的方法
- cssimportant會被IE忽略的技巧
- div與span的區別是什麼呢
- Linux系統開機黑屏提示kernel panic該怎麼辦?
- Linux系統上Nginx+Python的web.py與Django框架環境
- Linux下將Python的Django項目部署到Apache服務器
- 在Linux系統上部署Apache+Python+Django+MySQL環境
- android動態更改屏幕方向的代碼介紹
- AndroidMediaPlayer播放mp3的實例教程介紹
copyright © 萬盛學電腦網 all rights reserved