Djangoimgareaselect手动剪切头像实现方法

本文实例讲述了Django imgareaselect手动剪切头像的方法。分享给大家供大家参考。具体如下：

index.html:

  
  
  
  
 上传图片  
  
 
 
  
  

 

show.html:

  
  
  
  
 HTML5的标题  
  
ul {width:80%;padding:5px;} 
li{list-style:none;float:left;padding:5px;margin:5px;background-color:#ccc;} 
.info{color:green;} 
  
  
 
  
继续上传头像
 
  {% if messages %} 
    {% for message in messages %} 
      {{ message }}
 
    {% endfor %} 
  {% endif %} 
  
  {%for p in photos%} 
    
 
      继续剪切   
    
  {%endfor%} 
  
  
  

 

cut.html:

  
  
  
  
 剪切  
 
  
.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;} 
  
  
  
  
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 
  }); 
});  
  
  
 
头像剪切 返回    
{% if messages %} 
  {% for message in messages %} 
  {{ message }}
 
  {% endfor %} 
  {% endif %} 
 
 
  
点击原图 选择剪切区域
 
  


      
查看更多关于Djangoimgareaselect手动剪切头像实现方法的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did91291