how to crop an image before upload using php

Solutions on MaxInterview for how to crop an image before upload using php by the best coders in the world

showing results for - "how to crop an image before upload using php"
12 Apr 2019
1
2<?php
3//index.php
4
5?>
6<!DOCTYPE html>
7<html>
8	<head>
9		<title>Crop Image Before Upload using CropperJS with PHP</title>
10		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
11		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
12        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>        
13		<link rel="stylesheet" href="https://unpkg.com/dropzone/dist/dropzone.css" />
14		<link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet"/>
15		<script src="https://unpkg.com/dropzone"></script>
16		<script src="https://unpkg.com/cropperjs"></script>
17		
18		<style>
19
20		.image_area {
21		  position: relative;
22		}
23
24		img {
25		  	display: block;
26		  	max-width: 100%;
27		}
28
29		.preview {
30  			overflow: hidden;
31  			width: 160px; 
32  			height: 160px;
33  			margin: 10px;
34  			border: 1px solid red;
35		}
36
37		.modal-lg{
38  			max-width: 1000px !important;
39		}
40
41		.overlay {
42		  position: absolute;
43		  bottom: 10px;
44		  left: 0;
45		  right: 0;
46		  background-color: rgba(255, 255, 255, 0.5);
47		  overflow: hidden;
48		  height: 0;
49		  transition: .5s ease;
50		  width: 100%;
51		}
52
53		.image_area:hover .overlay {
54		  height: 50%;
55		  cursor: pointer;
56		}
57
58		.text {
59		  color: #333;
60		  font-size: 20px;
61		  position: absolute;
62		  top: 50%;
63		  left: 50%;
64		  -webkit-transform: translate(-50%, -50%);
65		  -ms-transform: translate(-50%, -50%);
66		  transform: translate(-50%, -50%);
67		  text-align: center;
68		}
69		
70		</style>
71	</head>
72	<body>
73		<div class="container" align="center">
74			<br />
75			<h3 align="center">Crop Image Before Upload using CropperJS with PHP</h3>
76			<br />
77			<div class="row">
78				<div class="col-md-4"> </div>
79				<div class="col-md-4">
80					<div class="image_area">
81						<form method="post">
82							<label for="upload_image">
83								<img src="upload/user.png" id="uploaded_image" class="img-responsive img-circle" />
84								<div class="overlay">
85									<div class="text">Click to Change Profile Image</div>
86								</div>
87								<input type="file" name="image" class="image" id="upload_image" style="display:none" />
88							</label>
89						</form>
90					</div>
91			    </div>
92    		<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
93			  	<div class="modal-dialog modal-lg" role="document">
94			    	<div class="modal-content">
95			      		<div class="modal-header">
96			        		<h5 class="modal-title">Crop Image Before Upload</h5>
97			        		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
98			          			<span aria-hidden="true">×</span>
99			        		</button>
100			      		</div>
101			      		<div class="modal-body">
102			        		<div class="img-container">
103			            		<div class="row">
104			                		<div class="col-md-8">
105			                    		<img src="" id="sample_image" />
106			                		</div>
107			                		<div class="col-md-4">
108			                    		<div class="preview"></div>
109			                		</div>
110			            		</div>
111			        		</div>
112			      		</div>
113			      		<div class="modal-footer">
114			      			<button type="button" id="crop" class="btn btn-primary">Crop</button>
115			        		<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
116			      		</div>
117			    	</div>
118			  	</div>
119			</div>			
120		</div>
121	</body>
122</html>
123
124<script>
125
126$(document).ready(function(){
127
128	var $modal = $('#modal');
129
130	var image = document.getElementById('sample_image');
131
132	var cropper;
133
134	$('#upload_image').change(function(event){
135		var files = event.target.files;
136
137		var done = function(url){
138			image.src = url;
139			$modal.modal('show');
140		};
141
142		if(files && files.length > 0)
143		{
144			reader = new FileReader();
145			reader.onload = function(event)
146			{
147				done(reader.result);
148			};
149			reader.readAsDataURL(files[0]);
150		}
151	});
152
153	$modal.on('shown.bs.modal', function() {
154		cropper = new Cropper(image, {
155			aspectRatio: 1,
156			viewMode: 3,
157			preview:'.preview'
158		});
159	}).on('hidden.bs.modal', function(){
160		cropper.destroy();
161   		cropper = null;
162	});
163
164	$('#crop').click(function(){
165		canvas = cropper.getCroppedCanvas({
166			width:400,
167			height:400
168		});
169
170		canvas.toBlob(function(blob){
171			url = URL.createObjectURL(blob);
172			var reader = new FileReader();
173			reader.readAsDataURL(blob);
174			reader.onloadend = function(){
175				var base64data = reader.result;
176				$.ajax({
177					url:'upload.php',
178					method:'POST',
179					data:{image:base64data},
180					success:function(data)
181					{
182						$modal.modal('hide');
183						$('#uploaded_image').attr('src', data);
184					}
185				});
186			};
187		});
188	});
189	
190});
191</script>
192
193
194
195
source