Download as
Browse Code »

Commit 434932afafe43947987fbcd614657075731ac604

Authored by Gustavo
1 parent efa55063
Exists in master and in 3 other branches amadeus_univasf, image-crop, refactoring

First crop image test, need to fix some issues.

Showing 3 changed files with 116 additions and 2 deletions   Show diff stats
amadeus/templates/base.html
  Diff comments   View file @434932a
@@ -30,6 +30,10 @@ @@ -30,6 +30,10 @@
30 30
31 <link rel="stylesheet" type="text/css" href="{% static 'css/jPages.css' %}"> 31 <link rel="stylesheet" type="text/css" href="{% static 'css/jPages.css' %}">
32 32
  33 + <script src="{% static 'js/cropper.min.js' %}"></script> <!-- Js for cropper-->
  34 + <link href="{% static 'css/cropper.min.css' %}" rel="stylesheet">
  35 +
  36 +
33 <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script> 37 <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
34 <!--<script type="text/javascript" src="{% static 'js/bootstrap-acessibility2.min.js' %}"></script>--> 38 <!--<script type="text/javascript" src="{% static 'js/bootstrap-acessibility2.min.js' %}"></script>-->
35 <script type="text/javascript" src="{% static 'material/js/material.min.js' %}"></script> 39 <script type="text/javascript" src="{% static 'material/js/material.min.js' %}"></script>
users/forms.py
  Diff comments   View file @434932a
@@ -8,6 +8,8 @@ from django.core.validators import validate_email @@ -8,6 +8,8 @@ from django.core.validators import validate_email
8 from django.core.exceptions import ValidationError 8 from django.core.exceptions import ValidationError
9 9
10 from resubmit.widgets import ResubmitFileWidget 10 from resubmit.widgets import ResubmitFileWidget
  11 +from PIL import Image
  12 +
11 13
12 from .models import User 14 from .models import User
13 15
@@ -60,9 +62,26 @@ class RegisterUserForm(Validation): @@ -60,9 +62,26 @@ class RegisterUserForm(Validation):
60 62
61 is_edit = False 63 is_edit = False
62 64
  65 + #Cropping image
  66 + x = forms.FloatField(widget=forms.HiddenInput())
  67 + y = forms.FloatField(widget=forms.HiddenInput())
  68 + width = forms.FloatField(widget=forms.HiddenInput())
  69 + height = forms.FloatField(widget=forms.HiddenInput())
  70 +
  71 +
63 def save(self, commit=True): 72 def save(self, commit=True):
64 super(RegisterUserForm, self).save(commit=False) 73 super(RegisterUserForm, self).save(commit=False)
65 74
  75 + x = self.cleaned_data.get('x')
  76 + y = self.cleaned_data.get('y')
  77 + w = self.cleaned_data.get('width')
  78 + h = self.cleaned_data.get('height')
  79 +
  80 + image = Image.open(self.instance.image)
  81 + cropped_image = image.crop((x, y, w+x, h+y))
  82 + resized_image = cropped_image.resize((200, 200), Image.ANTIALIAS)
  83 + resized_image.save(self.instance.image.path)
  84 +
66 self.instance.set_password(self.cleaned_data['new_password']) 85 self.instance.set_password(self.cleaned_data['new_password'])
67 86
68 self.instance.save() 87 self.instance.save()
@@ -71,7 +90,7 @@ class RegisterUserForm(Validation): @@ -71,7 +90,7 @@ class RegisterUserForm(Validation):
71 90
72 class Meta: 91 class Meta:
73 model = User 92 model = User
74 - fields = ['email', 'username', 'last_name', 'social_name', 'image', 'show_email', ] 93 + fields = ['email', 'username', 'last_name', 'social_name', 'image', 'show_email', 'x', 'y', 'width', 'height',]
75 widgets = { 94 widgets = {
76 'email': forms.EmailInput(attrs = {'placeholder': _('Email') + ' *'}), 95 'email': forms.EmailInput(attrs = {'placeholder': _('Email') + ' *'}),
77 'username': forms.TextInput(attrs = {'placeholder': _('Name') + ' *'}), 96 'username': forms.TextInput(attrs = {'placeholder': _('Name') + ' *'}),
users/templates/users/register.html
  Diff comments   View file @434932a
@@ -12,6 +12,69 @@ @@ -12,6 +12,69 @@
12 {% block sidebar %} 12 {% block sidebar %}
13 {% endblock sidebar %} 13 {% endblock sidebar %}
14 14
  15 +{% block javascript %}
  16 +<script>
  17 + $(function () {
  18 +
  19 + /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
  20 + $("#id_image").change(function () {
  21 + if (this.files && this.files[0]) {
  22 + var reader = new FileReader();
  23 + reader.onload = function (e) {
  24 + $("#image").attr("src", e.target.result);
  25 + $("#modalCrop").modal("show");
  26 + }
  27 + reader.readAsDataURL(this.files[0]);
  28 + }
  29 + });
  30 +
  31 + /* SCRIPTS TO HANDLE THE CROPPER BOX */
  32 + var $image = $("#image");
  33 + var cropBoxData;
  34 + var canvasData;
  35 + $("#modalCrop").on("shown.bs.modal", function () {
  36 + $image.cropper({
  37 + viewMode: 1,
  38 + aspectRatio: 1/1,
  39 + minCropBoxWidth: 200,
  40 + minCropBoxHeight: 200,
  41 + ready: function () {
  42 + $image.cropper("setCanvasData", canvasData);
  43 + $image.cropper("setCropBoxData", cropBoxData);
  44 + }
  45 + });
  46 + }).on("hidden.bs.modal", function () {
  47 + cropBoxData = $image.cropper("getCropBoxData");
  48 + canvasData = $image.cropper("getCanvasData");
  49 + $image.cropper("destroy");
  50 + });
  51 +
  52 + $(".js-zoom-in").click(function () {
  53 + $image.cropper("zoom", 0.1);
  54 + });
  55 +
  56 + $(".js-zoom-out").click(function () {
  57 + $image.cropper("zoom", -0.1);
  58 + });
  59 +
  60 + /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
  61 + $(".js-crop-and-upload").click(function () {
  62 + var cropData = $image.cropper("getData");
  63 + $("#id_x").val(cropData["x"]);
  64 + $("#id_y").val(cropData["y"]);
  65 + $("#id_height").val(cropData["height"]);
  66 + $("#id_width").val(cropData["width"]);
  67 + $("#formUpload").submit();
  68 + });
  69 +
  70 + });
  71 +</script>
  72 +
  73 +{% endblock javascript %}
  74 +
  75 +
  76 +
  77 +
15 {% block content %} 78 {% block content %}
16 <div class="row"> 79 <div class="row">
17 <div class="col-lg-offset-1 col-md-offset-1"> 80 <div class="col-lg-offset-1 col-md-offset-1">
@@ -40,7 +103,7 @@ @@ -40,7 +103,7 @@
40 </div> 103 </div>
41 </div> 104 </div>
42 105
43 - <form class="{% if form.has_error %} has-error {% endif %} form-horizontal is-fileinput" method="post" enctype="multipart/form-data"> 106 + <form class="{% if form.has_error %} has-error {% endif %} form-horizontal is-fileinput" method="post" enctype="multipart/form-data" id="formUpload">
44 {% csrf_token %} 107 {% csrf_token %}
45 {% for field in form %} 108 {% for field in form %}
46 <div class="col-lg-12 col-md-12 col-sm-12"> 109 <div class="col-lg-12 col-md-12 col-sm-12">
@@ -97,6 +160,34 @@ @@ -97,6 +160,34 @@
97 </div> 160 </div>
98 </div> 161 </div>
99 </div> 162 </div>
  163 + <!-- MODAL TO CROP THE IMAGE -->
  164 + <div class="modal fade" id="modalCrop">
  165 + <div class="modal-dialog">
  166 + <div class="modal-content">
  167 + <div class="modal-header">
  168 + <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  169 + <span aria-hidden="true">&times;</span>
  170 + </button>
  171 + <h4 class="modal-title">Crop the photo</h4>
  172 + </div>
  173 + <div class="modal-body">
  174 + <img src="" id="image" style="max-width: 100%;">
  175 + </div>
  176 + <div class="modal-footer">
  177 + <div class="btn-group pull-left" role="group">
  178 + <button type="button" class="btn btn-default js-zoom-in">
  179 + <span class="glyphicon glyphicon-zoom-in"></span>
  180 + </button>
  181 + <button type="button" class="btn btn-default js-zoom-out">
  182 + <span class="glyphicon glyphicon-zoom-out"></span>
  183 + </button>
  184 + </div>
  185 + <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
  186 + <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
  187 + </div>
  188 + </div>
  189 + </div>
  190 + </div>
100 {% endblock %} 191 {% endblock %}
101 192
102 {% block bottommenu %} 193 {% block bottommenu %}