From 08b97e722b8c9de31d273103bfe200068d96ddd3 Mon Sep 17 00:00:00 2001 From: Pierre-antoine Comby Date: Thu, 5 Mar 2020 23:32:01 +0100 Subject: [PATCH] add support for cropping image. WIP. --- apps/member/views.py | 13 +- apps/note/forms.py | 9 +- note_kfet/settings/base.py | 4 + note_kfet/urls.py | 1 + templates/member/profile_picture_update.html | 130 ++++++++++++------- 5 files changed, 105 insertions(+), 52 deletions(-) diff --git a/apps/member/views.py b/apps/member/views.py index 25dcbf8a..9b185cca 100644 --- a/apps/member/views.py +++ b/apps/member/views.py @@ -16,6 +16,7 @@ from django.core.exceptions import ValidationError from django_tables2.views import SingleTableView from rest_framework.authtoken.models import Token from dal import autocomplete +from PIL import Image from note.models import Alias, NoteUser from note.models.transactions import Transaction @@ -229,8 +230,16 @@ class ProfilePictureUpdateView(LoginRequiredMixin, FormMixin, DetailView): return self.form_invalid(form) def form_valid(self,form): - print(form) - self.object.note.display_image = form.cleaned_data.get("image","pic/default.png") + image_file_field = form.cleaned_data['image'] + x = form.cleaned_data['x'] + y = form.cleaned_data['y'] + w = form.cleaned_data['width'] + h = form.cleaned_data['height'] + with Image.open(image_file_field.name) as image: + image = image.crop((x, y, w+x, h+y)) + image.thumbnail((256, 256), Image.ANTIALIAS) + image.save(image_file_field.name,format=image.format) + self.object.note.display_image = image_file_field self.object.note.save() return super().form_valid(form) diff --git a/apps/note/forms.py b/apps/note/forms.py index af6c97bc..819ed97a 100644 --- a/apps/note/forms.py +++ b/apps/note/forms.py @@ -3,8 +3,11 @@ from dal import autocomplete from django import forms +from django.conf import settings from django.utils.translation import gettext_lazy as _ +import os + from crispy_forms.helper import FormHelper from crispy_forms.bootstrap import Div from crispy_forms.layout import Layout, HTML @@ -27,8 +30,12 @@ class ImageForm(forms.Form): image = forms.ImageField(required = False, label=_('select an image'), help_text=_('Maximal size: 2MB')) + x = forms.FloatField(widget=forms.HiddenInput()) + y = forms.FloatField(widget=forms.HiddenInput()) + width = forms.FloatField(widget=forms.HiddenInput()) + height = forms.FloatField(widget=forms.HiddenInput()) - + class TransactionTemplateForm(forms.ModelForm): class Meta: model = TransactionTemplate diff --git a/note_kfet/settings/base.py b/note_kfet/settings/base.py index fad5e6f7..63a07c03 100644 --- a/note_kfet/settings/base.py +++ b/note_kfet/settings/base.py @@ -191,3 +191,7 @@ ALIAS_VALIDATOR_REGEX = r'' MEDIA_ROOT=os.path.join(BASE_DIR,"media") MEDIA_URL='/media/' + +# Profile Picture Settings +PIC_WIDTH = 200 +PIC_RATIO = 1 diff --git a/note_kfet/urls.py b/note_kfet/urls.py index 385ce991..0a79e414 100644 --- a/note_kfet/urls.py +++ b/note_kfet/urls.py @@ -26,3 +26,4 @@ urlpatterns = [ ] urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT) +urlpatterns += static(settings.STATIC_URL,document_root=settings.STATIC_ROOT) diff --git a/templates/member/profile_picture_update.html b/templates/member/profile_picture_update.html index a5de13dc..f0e30834 100644 --- a/templates/member/profile_picture_update.html +++ b/templates/member/profile_picture_update.html @@ -2,62 +2,94 @@ {% load i18n static pretty_money django_tables2 crispy_forms_tags %} {% block profile_content %} -
-
- -

{% trans "current image" %}

-
-
-
- {% csrf_token %} - {{ form |crispy }} - -
-
-
-
-
+
+ {% csrf_token %} + {{ form |crispy }} +
+ + {% endblock %} +{% block extracss %} + +{% endblock %} + {% block extrajavascript%} - + + + /* SCRIPTS TO HANDLE THE CROPPER BOX */ + var $image = $("#modal-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(); + }); + + }); + {% endblock %}