First crop image test, need to fix some issues.

Gustavo
1 parent efa55063
Showing 3 changed files with 116 additions and 2 deletions Show diff stats
amadeus/templates/base.html
users/forms.py
users/templates/users/register.html
@@ -30,6 +30,10 @@
  
     <link rel="stylesheet" type="text/css" href="{% static 'css/jPages.css' %}">
  
+ 		<script src="{% static 'js/cropper.min.js' %}"></script> <!-- Js for cropper-->
+		<link href="{% static 'css/cropper.min.css' %}" rel="stylesheet">
+
+		
 	<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
 	<!--<script type="text/javascript" src="{% static 'js/bootstrap-acessibility2.min.js' %}"></script>-->
 	<script type="text/javascript" src="{% static 'material/js/material.min.js' %}"></script>
@@ -8,6 +8,8 @@ from django.core.validators import validate_email
 from django.core.exceptions import ValidationError
  
 from resubmit.widgets import ResubmitFileWidget
+from PIL import Image
+
  
 from .models import User
  
@@ -60,9 +62,26 @@ class RegisterUserForm(Validation):
  
     is_edit = False
  
+	#Cropping image
+    x = forms.FloatField(widget=forms.HiddenInput())
+    y = forms.FloatField(widget=forms.HiddenInput())
+    width = forms.FloatField(widget=forms.HiddenInput())
+    height = forms.FloatField(widget=forms.HiddenInput())
+
+
     def save(self, commit=True):
         super(RegisterUserForm, self).save(commit=False)
  
+        x = self.cleaned_data.get('x')
+        y = self.cleaned_data.get('y')
+        w = self.cleaned_data.get('width')
+        h = self.cleaned_data.get('height')
+
+        image = Image.open(self.instance.image)
+        cropped_image = image.crop((x, y, w+x, h+y))
+        resized_image = cropped_image.resize((200, 200), Image.ANTIALIAS)
+        resized_image.save(self.instance.image.path)
+
         self.instance.set_password(self.cleaned_data['new_password'])
  
         self.instance.save()
@@ -71,7 +90,7 @@ class RegisterUserForm(Validation):
  
     class Meta:
         model = User
-        fields = ['email', 'username', 'last_name', 'social_name', 'image', 'show_email', ]
+        fields = ['email', 'username', 'last_name', 'social_name', 'image', 'show_email', 'x', 'y', 'width', 'height',]
         widgets = {
         	'email': forms.EmailInput(attrs = {'placeholder': _('Email') + ' *'}),
         	'username': forms.TextInput(attrs = {'placeholder': _('Name') + ' *'}),
@@ -12,6 +12,69 @@
 {% block sidebar %}
 {% endblock sidebar %}
  
+{% block javascript %}
+<script>
+	$(function () {
+
+		/* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
+		$("#id_image").change(function () {
+			if (this.files && this.files[0]) {
+				var reader = new FileReader();
+				reader.onload = function (e) {
+					$("#image").attr("src", e.target.result);
+					$("#modalCrop").modal("show");
+				}
+				reader.readAsDataURL(this.files[0]);
+			}
+		});
+
+		/* SCRIPTS TO HANDLE THE CROPPER BOX */
+		var $image = $("#image");
+		var cropBoxData;
+		var canvasData;
+		$("#modalCrop").on("shown.bs.modal", function () {
+			$image.cropper({
+				viewMode: 1,
+				aspectRatio: 1/1,
+				minCropBoxWidth: 200,
+				minCropBoxHeight: 200,
+				ready: function () {
+					$image.cropper("setCanvasData", canvasData);
+					$image.cropper("setCropBoxData", cropBoxData);
+				}
+			});
+		}).on("hidden.bs.modal", function () {
+			cropBoxData = $image.cropper("getCropBoxData");
+			canvasData = $image.cropper("getCanvasData");
+			$image.cropper("destroy");
+		});
+
+		$(".js-zoom-in").click(function () {
+			$image.cropper("zoom", 0.1);
+		});
+
+		$(".js-zoom-out").click(function () {
+			$image.cropper("zoom", -0.1);
+		});
+
+		/* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
+		$(".js-crop-and-upload").click(function () {
+			var cropData = $image.cropper("getData");
+			$("#id_x").val(cropData["x"]);
+			$("#id_y").val(cropData["y"]);
+			$("#id_height").val(cropData["height"]);
+			$("#id_width").val(cropData["width"]);
+			$("#formUpload").submit();
+		});
+
+	});
+</script>
+
+{% endblock javascript %}
+
+
+
+
 {% block content %}
 	<div class="row">
 		<div class="col-lg-offset-1 col-md-offset-1">
@@ -40,7 +103,7 @@
 						</div>
 					</div>
  
-					<form class="{% if form.has_error %} has-error {% endif %} form-horizontal is-fileinput" method="post" enctype="multipart/form-data">
+					<form class="{% if form.has_error %} has-error {% endif %} form-horizontal is-fileinput" method="post" enctype="multipart/form-data" id="formUpload">
 						{% csrf_token %}
 						{% for field in form %}
 							<div class="col-lg-12 col-md-12 col-sm-12">
@@ -97,6 +160,34 @@
 			</div>
 		</div>
 	</div>
+	<!-- MODAL TO CROP THE IMAGE -->
+	<div class="modal fade" id="modalCrop">
+	  <div class="modal-dialog">
+	    <div class="modal-content">
+	      <div class="modal-header">
+	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+	          <span aria-hidden="true">&times;</span>
+	        </button>
+	        <h4 class="modal-title">Crop the photo</h4>
+	      </div>
+	      <div class="modal-body">
+	        <img src="" id="image" style="max-width: 100%;">
+	      </div>
+	      <div class="modal-footer">
+	        <div class="btn-group pull-left" role="group">
+	          <button type="button" class="btn btn-default js-zoom-in">
+	            <span class="glyphicon glyphicon-zoom-in"></span>
+	          </button>
+	          <button type="button" class="btn btn-default js-zoom-out">
+	            <span class="glyphicon glyphicon-zoom-out"></span>
+	          </button>
+	        </div>
+	        <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
+	        <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
+	      </div>
+	    </div>
+	  </div>
+	</div>
 {% endblock %}
  
 {% block bottommenu %}
...	...	@@ -30,6 +30,10 @@
30	30
31	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	37	<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
34	38	<!--<script type="text/javascript" src="{% static 'js/bootstrap-acessibility2.min.js' %}"></script>-->
35	39	<script type="text/javascript" src="{% static 'material/js/material.min.js' %}"></script>
...	...
...	...	@@ -8,6 +8,8 @@ from django.core.validators import validate_email
8	8	from django.core.exceptions import ValidationError
9	9
10	10	from resubmit.widgets import ResubmitFileWidget
	11	+from PIL import Image
	12	+
11	13
12	14	from .models import User
13	15
...	...	@@ -60,9 +62,26 @@ class RegisterUserForm(Validation):
60	62
61	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	72	def save(self, commit=True):
64	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	85	self.instance.set_password(self.cleaned_data['new_password'])
67	86
68	87	self.instance.save()
...	...	@@ -71,7 +90,7 @@ class RegisterUserForm(Validation):
71	90
72	91	class Meta:
73	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	94	widgets = {
76	95	'email': forms.EmailInput(attrs = {'placeholder': _('Email') + ' *'}),
77	96	'username': forms.TextInput(attrs = {'placeholder': _('Name') + ' *'}),
...	...
...	...	@@ -12,6 +12,69 @@
12	12	{% block sidebar %}
13	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	78	{% block content %}
16	79	<div class="row">
17	80	<div class="col-lg-offset-1 col-md-offset-1">
...	...	@@ -40,7 +103,7 @@
40	103	</div>
41	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	107	{% csrf_token %}
45	108	{% for field in form %}
46	109	<div class="col-lg-12 col-md-12 col-sm-12">
...	...	@@ -97,6 +160,34 @@
97	160	</div>
98	161	</div>
99	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">×</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	191	{% endblock %}
101	192
102	193	{% block bottommenu %}
...	...