Image Crop Project in Django with Source Code

May 13, 2021May 13, 2021 by adones evangelista

Image Crop Project in Django with Source Code

This Image Crop Project in Django created based on python, Django, and SQLITE3 Database. The project Image Crop is used to edit the picture that the user wants to edit. Users must first upload the jpg image that they want to crop before continuing to crop the image, display a preview in a modal, crop the image and finally upload it and save in the server.

A Image Crop Project in Django is an easy project for beginners to learn how to build a web-based python Django project. We will provide you with the complete source code and database for the python project so that you can easily install it on your machine and learn how to program in Python Django.

Watch the video here to see the full running source code of Image Crop Project in Django with Source Code

This Image Crop Project in Django Framework, Also includes a Download Source Code for free, just find the downloadable source code below and click download now.

Image Crop Project in Django Steps on How to Create a Project

Time needed: 5 minutes.

Here’s the step’s on how to create a Image Crop Project in Django with Source Code.

Step 1: Open file.
First , open “pycharm professional” after that click “file” and click “new project“.
Step 2: Choose Django.
Next, after click “new project“, choose “Django” and click.
Step 3: Select file location.
Then, select a file location wherever you want.
Step 4: Create application name.
After that, name your application.
Step 5: Click create.
Lastly, finish creating project by clicking “create” button.
Step 6: Start Coding.
Finally, we will now start adding functionality to our Django Framework by adding some functional codes.

Functionality and Codes of the Image Crop Project in Django

Create template for the photo form in Image Crop Project Project in Django.

In this section, we will learn on how create a templates for the photo form. To start with, add the following code in your photo_form.html under the folder of /templates/photos.

{% extends "base.html" %}
{% load static %}

{% block styles %}

	<link  href="{% static 'css/cropper.min.css' %}" rel="stylesheet">
	<style type="text/css" media="screen">
		/* Limit image width to avoid overflow the container */
		img {
		  max-width: 100%; /* This rule is very important, please do not ignore this! */
		}
	</style>

{% endblock %}

{% block title %}

	Upload Photo

{% endblock %}

{% block content %}

<div class="container mt-5">
	<form method="post" enctype="multipart/form-data" id="formUpload">
  		{% csrf_token %}
  		{{ form.as_p }}
  		<button type="submit" id="formUploadButton" style="display: none;">Save</button>
	</form>

	<!-- 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>

	<!-- CONTAINER TO DISPLAY THE CROPPED IMAGES -->
	<div class="row mt-4">
	  {% for photo in photos %}
	    <div class="col-sm-4 col-md-3">
	    <a href="{{ photo.image.url }}" title="{{ photo.image }}">
	      	<img src="{{ photo.image.url }}" width="250" height="250" class="thumbnail">
	    </a>
	    </div>
	  {% endfor %}
	</div>

<!-- container ends here -->
</div>

{% endblock content %}

{% block scripts %}

	<script src="{% static 'js/cropper.min.js' %}"></script><!-- Cropper.js is required -->
    <script src="{% static 'js/jquery-cropper.min.js' %}"></script>

    <script type="text/javascript">

    $(function(){

    	/* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
		$("#id_image").change(function (e) {
		  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");
		});

		// Enable zoom in button
		$(".js-zoom-in").click(function () {
		  $image.cropper("zoom", 0.1);
		});

		// Enable zoom out button
		$(".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_image_height").val(cropData["height"]);
		  $("#id_image_width").val(cropData["width"]);
		  $("#formUploadButton").click();
		});

	})
	</script>

{% endblock %}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

{% extends "base.html" %}

{% load static %}

{% block styles %}

<link href="{% static 'css/cropper.min.css' %}" rel="stylesheet">

<style type="text/css" media="screen">

/* Limit image width to avoid overflow the container */

img {

max-width: 100%; /* This rule is very important, please do not ignore this! */

}

</style>

{% endblock %}

{% block title %}

Upload Photo

{% endblock %}

{% block content %}

<div class="container mt-5">

<form method="post" enctype="multipart/form-data" id="formUpload">

{% csrf_token %}

{{ form.as_p }}

<button type="submit" id="formUploadButton" style="display: none;">Save</button>

</form>

<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">×</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>

<div class="row mt-4">

{% for photo in photos %}

<div class="col-sm-4 col-md-3">

<a href="{{ photo.image.url }}" title="{{ photo.image }}">

<img src="{{ photo.image.url }}" width="250" height="250" class="thumbnail">

</a>

</div>

{% endfor %}

</div>

</div>

{% endblock content %}

{% block scripts %}

<script src="{% static 'js/cropper.min.js' %}"></script>

<script src="{% static 'js/jquery-cropper.min.js' %}"></script>

<script type="text/javascript">

$(function(){

/* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */

$("#id_image").change(function (e) {

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");

});

// Enable zoom in button

$(".js-zoom-in").click(function () {

$image.cropper("zoom", 0.1);

});

// Enable zoom out button

$(".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_image_height").val(cropData["height"]);

$("#id_image_width").val(cropData["width"]);

$("#formUploadButton").click();

});

})

</script>

{% endblock %}

Create template for the base in Image Crop Project Project in Django.

In this section, we will learn on how create a templates for the base. To start with, add the following code in your base.html under the folder of /templates/.

{% load static %}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>{% block title %}Image Crop{% endblock %}</title>

    {% block styles %}{% endblock %}
  </head>
  <body>
    {% block content %}

      <h1>Hello, world!</h1>

    {% endblock %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    {% block scripts %}

    {% endblock scripts %}
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

{% load static %}

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<title>{% block title %}Image Crop{% endblock %}</title>

{% block styles %}{% endblock %}

</head>

<body>

{% block content %}

<h1>Hello, world!</h1>

{% endblock %}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

{% block scripts %}

{% endblock scripts %}

</body>

</html>

Run Quick Virus Scan for secure Download

Run Quick Scan for safe Download

Downloadable Source Code Below.

Anyway, if you want to level up your programming knowledge, especially python, try this new article I’ve made for you Best Python Projects with source code for Beginners. But If you’re going to focus on web development using Django, you can download here from our list of Best Django Projects with source code based on real-world projects.

How To Run The Image Crop Project in Django?

Step 1: Extract/unzip the file
Step 2: Go inside the project folder, open cmd and type the following commands to install Django Framework and run the webserver:
python manage.py migrate
python manage.py runserver
Step 3: Finally, open the browser and go to http://127.0.0.1:8000/

Summary

In summary, this 2021 Image Crop Project in Django with Source Code can be useful to students or professional who wants to learn python programming language. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy Coding!

Inquiries

If you have any questions or suggestions about Image Crop Project in Django with Source Code, please feel free to leave a comment below.

Leave a Comment Cancel reply