Code changes:

#### Download cropperjs library. - Timestamp: 1:40 - Find on GitHub: [cropperjs library](https://github.com/fengyuanchen/cropperjs) - On GitHub, click on "Code" (Green button) -> Download ZIP: to download the ZIP file. - Extract the ZIP folder `cropperjs-master.zip` we downloaded.

#### Create a `account/templates/account` folder. - Timestamp: 2:20 - Find on GitHub: [static/cropperjs](https://github.com/mitchtabian/Codingwithmitch-Chat/tree/cropping-an-image-using-javascript-and-python/static/cropperjs) - Copy all the files/folders in `cropperjs-master` folder except the `.github` folder and paste them into `static/cropperjs`

#### Collect Static. Collects the static files into `STATIC_ROOT`. Our `STATIC_ROOT` is `os.path.join(BASE_DIR, 'static_cdn')` - Timestamp: 2:31 - Inside `(venv) D:\DjangoProjects\ChatServerPlayground\venv\src` - Run: `python manage.py collectstatic` - Optional: If it asks for confirmation, type `yes` and hit Enter. - Output: XXX static files copied to `D:\DjangoProjects\ChatServerPlayground\venv\src\static_cdn`. Open the `static_cdn` folder locally and you will see files/folders copied there as shown in the video.

#### Install opencv-python. Collects the static files into `STATIC_ROOT`. Our `STATIC_ROOT` is `os.path.join(BASE_DIR, 'static_cdn')` - Timestamp: 3:50 - Inside `(venv) D:\DjangoProjects\ChatServerPlayground\venv\src` - Run: `pip install opencv-python` - Run: `pip freeze > requirements.txt` to record an environment's current package list into requirements.txt.

#### Update `account/views.py` file. - Timestamp: 6:50 - [See changes on GitHub: Line 6](https://github.com/mitchtabian/Codingwithmitch-Chat/compare/uploading-an-image...cropping-an-image-using-javascript-and-python#diff-9e5eccc5d9358228f47948190281f502e7a82d4c90aaf38e7790b0ccfede046bR6) ```python # TODO: ADD THESE IMPORTS TO THE TOP OF THE FILE. from django.core.files.storage import default_storage from django.core.files.storage import FileSystemStorage import os import cv2 import json import base64 import requests from django.core import files ``` - [See changes on GitHub: Line 20](https://github.com/mitchtabian/Codingwithmitch-Chat/compare/uploading-an-image...cropping-an-image-using-javascript-and-python?diff=unified#diff-9e5eccc5d9358228f47948190281f502e7a82d4c90aaf38e7790b0ccfede046bR20) ```python ADD THESE LINE IMMEDIATELY BELOW THE IMPORTS. TEMP_PROFILE_IMAGE_NAME = "temp_profile_image.png" ``` - [See changes on GitHub: Line 149](https://github.com/mitchtabian/Codingwithmitch-Chat/compare/uploading-an-image...cropping-an-image-using-javascript-and-python?diff=unified#diff-9e5eccc5d9358228f47948190281f502e7a82d4c90aaf38e7790b0ccfede046bR149) ```python # TODO: ADD THESE METHODS. def save_temp_profile_image_from_base64String(imageString, user): INCORRECT_PADDING_EXCEPTION = "Incorrect padding" try: if not os.path.exists(settings.TEMP): os.mkdir(settings.TEMP) if not os.path.exists(settings.TEMP + "/" + str(user.pk)): os.mkdir(settings.TEMP + "/" + str(user.pk)) url = os.path.join(settings.TEMP + "/" + str(user.pk),TEMP_PROFILE_IMAGE_NAME) storage = FileSystemStorage(location=url) image = base64.b64decode(imageString) with storage.open('', 'wb+') as destination: destination.write(image) destination.close() return url except Exception as e: print("exception: " + str(e)) # workaround for an issue I found if str(e) == INCORRECT_PADDING_EXCEPTION: imageString += "=" * ((4 - len(imageString) % 4) % 4) return save_temp_profile_image_from_base64String(imageString, user) return None def crop_image(request, *args, **kwargs): payload = {} user = request.user if request.POST and user.is_authenticated: try: imageString = request.POST.get("image") url = save_temp_profile_image_from_base64String(imageString, user) img = cv2.imread(url) cropX = int(float(str(request.POST.get("cropX")))) cropY = int(float(str(request.POST.get("cropY")))) cropWidth = int(float(str(request.POST.get("cropWidth")))) cropHeight = int(float(str(request.POST.get("cropHeight")))) if cropX < 0: cropX = 0 if cropY < 0: # There is a bug with cropperjs. y can be negative. cropY = 0 crop_img = img[cropY:cropY+cropHeight, cropX:cropX+cropWidth] cv2.imwrite(url, crop_img) # delete the old image user.profile_image.delete() # Save the cropped image to user model user.profile_image.save("profile_image.png", files.File(open(url, 'rb'))) user.save() payload['result'] = "success" payload['cropped_profile_image'] = user.profile_image.url # delete temp file os.remove(url) except Exception as e: print("exception: " + str(e)) payload['result'] = "error" payload['exception'] = str(e) return HttpResponse(json.dumps(payload), content_type="application/json") ```

#### Update `account/urls.py` file. - Timestamp: 23:00 - [See changes on GitHub: Line 6](https://github.com/mitchtabian/Codingwithmitch-Chat/compare/uploading-an-image...cropping-an-image-using-javascript-and-python?diff=unified#diff-9dac5805d6aec41dc886ea40ed1f3f8dae546179bf33fd7418fa40b7f36b55bbR6) ```python from account.views import ( account_view, edit_account_view, crop_image, # TODO: ADD THiS LINE. ) app_name = 'account' urlpatterns = [ path('/', account_view, name="view"), path('/edit/', edit_account_view, name="edit"), path('/edit/cropImage/', crop_image, name="crop_image"), # TODO: ADD THiS LINE. ] ```

#### Update `templates/base.html` file. - Timestamp: 23:40 - [See changes on GitHub: Line 14](https://github.com/mitchtabian/Codingwithmitch-Chat/compare/uploading-an-image...cropping-an-image-using-javascript-and-python?diff=unified#diff-690b81fad8df2a1f1ce37c846641d9247e3472d244f17039d2910a5ed0c98d5eR14) ```html # ``` - [See changes on GitHub: Line 51](https://github.com/mitchtabian/Codingwithmitch-Chat/compare/uploading-an-image...cropping-an-image-using-javascript-and-python?diff=unified#diff-690b81fad8df2a1f1ce37c846641d9247e3472d244f17039d2910a5ed0c98d5eR51) ```javascript // TODO: ADD THESE SCRIPTS. ``` - [See changes on GitHub: Line 25](https://github.com/mitchtabian/Codingwithmitch-Chat/compare/uploading-an-image...cropping-an-image-using-javascript-and-python?diff=unified#diff-690b81fad8df2a1f1ce37c846641d9247e3472d244f17039d2910a5ed0c98d5eR25) ```html ```

#### Update `account/templates/account/edit_account.html` file. - Timestamp: 27:25 - Copy this entire file: [edit_account.html](https://github.com/mitchtabian/Codingwithmitch-Chat/blob/cropping-an-image-using-javascript-and-python/account/templates/account/edit_account.html) - Mitch mentions about [Base64](https://en.wikipedia.org/wiki/Base64).

Author

Comments