django & cropper.js &bootstrap 实现头像截取并上传

最新推荐文章于 2023-06-12 11:27:51 发布

开心点点

最新推荐文章于 2023-06-12 11:27:51 发布

阅读量2.9k

点赞数

分类专栏： web开发文章标签：头像截取 cropper-js python django

本文链接：https://blog.csdn.net/honghu549599AAA/article/details/51275489

版权

web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

index.html

<!doctype html>
{% load staticfiles %}
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>头像截取</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/normalize.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/default.css"' %}">
<link href="{% static 'assets/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'dist/cropper.css' %}" rel="stylesheet">

<link href="{% static 'css/main.css' %}"  rel="stylesheet">
<!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
    <!-- Content -->
<div class="container">
<div class="row">
<form id="uploadForm">
  <div class="col-md-9">
    <!-- <h3 class="page-header">Demo:</h3> -->
    <div class="img-container">
       <img src="{% static 'assets/img/pic.jpg' %}" alt="Picture">
    </div>
  </div>
  <div class="col-md-3">
    <!-- <h3 class="page-header">Preview:</h3> -->
    <div class="docs-preview clearfix">
      <div class="img-preview preview-lg"></div>
      <div class="img-preview preview-md"></div>
      <div class="img-preview preview-sm"></div>
      <div class="img-preview preview-xs"></div>
    </div>

    <!-- <h3 class="page-header">Data:</h3> -->
    <div class="docs-data">
      <div class="input-group">
        <label class="input-group-addon" for="dataX">X</label>
        <input class="form-control" id="dataX" type="text" placeholder="x" name="x">
        <span class="input-group-addon">px</span>
      </div>
      <div class="input-group">
        <label class="input-group-addon" for="dataY">Y</label>
        <input class="form-control" id="dataY" type="text" placeholder="y" name="y">
        <span class="input-group-addon">px</span>
      </div>
      <div class="input-group">
        <label class="input-group-addon" for="dataWidth">Width</label>
        <input class="form-control" id="dataWidth" type="text" placeholder="width" name="w">
        <span class="input-group-addon">px</span>
      </div>
      <div class="input-group">
        <label class="input-group-addon" for="dataHeight">Height</label>
        <input class="form-control" id="dataHeight" type="text" placeholder="height" name="h">
        <span class="input-group-addon">px</span>
      </div>

    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-9 center">
    <!-- <h3 class="page-header">Toolbar:</h3> -->

    <div class="btn-group" width="80%">
     <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file" width="80%">
        <!--<input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">-->


        <input class="sr-only"  id="inputImage" name="file" type="file" accept="image/*">
        <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
          <span>选择</span>
        </span>
      </label>
    </div>

    <div class="btn-group">
      <button class="btn btn-primary" id="submit" type="button"  aria-expanded="true">
        <span class="docs-tooltip">
          <span>提交</span>
        </span>
      </button>
    </div>
  </div><!-- /.docs-buttons -->








  <div class="col-md-3 docs-toggles">
    <!-- <h3 class="page-header">Toggles:</h3> -->



  </div><!-- /.docs-toggles -->
 <!-- </form> -->


</div>
</div>
<!-- Alert -->


<script src="{% static 'assets/js/jquery.min.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script src="{% static 'dist/cropper.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>

</body>
</html>
<div style="display:none">
    <script type="text/javascript">


     $(function(){
        $("#submit").click(function(){
        //alert("sub");
        x = $("#dataX").val();
        y = $("#dataY").val();
        w = $("#dataWidth").val();
        h = $("#dataHeight").val();
        //alert(imageId);
        //+x+'y='+y+'w='+w+'h='+h

        /*
        $.get('/sub?imageId='+imageId+'&x='+x+'&y='+y+'&w='+w+'&h='+h,function(data){
            if(data=="1"){
                alert("提交成功");
            }else{
                alert("提交失败");
            }
        });
        */
         var formData = new FormData($( "#uploadForm" )[0]);  
         $.ajax({  
              url: '/sub/' ,  
              type: 'POST',  
              data: formData,  
              async: false,  
              cache: false,  
              contentType: false,  
              processData: false,  
              success: function (returndata) {  
                  if(returndata == "1")
                    alert("提交成功");
                  else{
                    alert("提交失败，请重试！");
                  }
              },  
              error: function (returndata) {  
                  alert("提交失败，请重试！");  
              }  
      });  

     });
    });

    </script>
</div>

main.js

var imageId = "";
$(function () {
  'use strict';

  var console = window.console || { log: function () {} },
      $alert = $('.docs-alert'),
      $message = $alert.find('.message'),
      showMessage = function (message, type) {
        $message.text(message);

        if (type) {
          $message.addClass(type);
        }

        $alert.fadeIn();

        setTimeout(function () {
          $alert.fadeOut();
        }, 3000);
      };

  // Demo
  // -------------------------------------------------------------------------

  (function () {
    var $image = $('.img-container > img'),
        $dataX = $('#dataX'),
        $dataY = $('#dataY'),
        $dataHeight = $('#dataHeight'),
        $dataWidth = $('#dataWidth'),
        $dataRotate = $('#dataRotate'),
        options = {
          mouseWheelZoom: false, //禁用鼠标滑轮缩放
          preview: '.img-preview',
          crop: function (data) {
            $dataX.val(Math.round(data.x));
            $dataY.val(Math.round(data.y));
            $dataHeight.val(Math.round(data.height));
            $dataWidth.val(Math.round(data.width));
            $dataRotate.val(Math.round(data.rotate));
          }
        };

    $image.on({
      'build.cropper': function (e) {
        console.log(e.type);
      },
      'built.cropper': function (e) {
        console.log(e.type);
      },
      'dragstart.cropper': function (e) {
        console.log(e.type, e.dragType);
      },
      'dragmove.cropper': function (e) {
        console.log(e.type, e.dragType);
      },
      'dragend.cropper': function (e) {
        console.log(e.type, e.dragType);
      }
      /*,
      'zoomin.cropper': function (e) {
        console.log(e.type);
      },
      'zoomout.cropper': function (e) {
        console.log(e.type);
      }
      */
    }).cropper(options);


    // Methods
    $(document.body).on('click', '[data-method]', function () {
      var data = $(this).data(),
          $target,
          result;

      if (data.method) {
        data = $.extend({}, data); // Clone a new one

        if (typeof data.target !== 'undefined') {
          $target = $(data.target);

          if (typeof data.option === 'undefined') {
            try {
              data.option = JSON.parse($target.val());
            } catch (e) {
              console.log(e.message);
            }
          }
        }

        result = $image.cropper(data.method, data.option);

        if (data.method === 'getCroppedCanvas') {
          $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
        }

        if ($.isPlainObject(result) && $target) {
          try {
            $target.val(JSON.stringify(result));
          } catch (e) {
            console.log(e.message);
          }
        }

      }
    }).on('keydown', function (e) {

      switch (e.which) {
        case 37:
          e.preventDefault();
          $image.cropper('move', -1, 0);
          break;

        case 38:
          e.preventDefault();
          $image.cropper('move', 0, -1);
          break;

        case 39:
          e.preventDefault();
          $image.cropper('move', 1, 0);
          break;

        case 40:
          e.preventDefault();
          $image.cropper('move', 0, 1);
          break;
      }

    });


    // Import image
    var $inputImage = $('#inputImage'),
        URL = window.URL || window.webkitURL,
        blobURL;

    if (URL) {
      $inputImage.change(function () {
          //alert("change");
        var files = this.files,
            file;

        if (files && files.length) {
          file = files[0];
          imageId = file.name;

          if (/^image\/\w+$/.test(file.type)) {
            blobURL = URL.createObjectURL(file);
            $image.one('built.cropper', function () {
              URL.revokeObjectURL(blobURL); // Revoke when load complete
            }).cropper('reset', true).cropper('replace', blobURL);
            //$inputImage.val('');
          } else {
            showMessage('Please choose an image file.');
          }
        }
      });
    } else {
      $inputImage.parent().remove();
    }


    // Options
    $('.docs-options :checkbox').on('change', function () {
      var $this = $(this);

      options[$this.val()] = $this.prop('checked');
      $image.cropper('destroy').cropper(options);
    });


    // Tooltips
    $('[data-toggle="tooltip"]').tooltip();

  }());

});

Django后台处理逻辑

def sub(request):
      #return HttpResponse("Hello world ! ")
     #imgName = request.GET.get('url')
     #context['error'] = 'system exception' 
     '''
     if request.method == "POST":
        pf = plateForm(request.POST,request.FILES)
        if pf.is_valid():
            imgName = uf.cleaned_data['username']
            plateImg = uf.cleaned_data['headImg']
            return HttpResponse('upload ok!')
    '''
     x = request.POST.get('x')
     y = request.POST.get('y')
     w = request.POST.get('w')
     h = request.POST.get('h')
     #print(request.FILES['file'])
     imgType = request.FILES['file'].name.split(".")[1]
     imgName = handle_uploaded_file(request.FILES['file'],imgType)
     #print("===>>>",x,y,w,h)
     if(x !=None and y != None and w!= None and h != None):
        line = imgName+"."+imgType+"\t"+x+"\t"+y+"\t"+w+"\t"+h
        with open("plate.txt","a+") as f:
           f.write(line+"\n")
        return HttpResponse("1")
     else:
        return HttpResponse("0")
def handle_uploaded_file(f,ImgType):
   newImageName = str(time.time()).split(".")[0]
   destination = open(BASE_DIR+BASE_IMG_DIR+str(newImageName)+"."+ImgType, 'wb')
   for chunk in f.chunks():
      destination.write(chunk)
   destination.close()
   return newImageName

开心点点

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
django & cropper.js &bootstrap 实现头像截取并上传

index.html<!doctype html>{% load staticfiles %}<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=devi
复制链接

扫一扫