1:
2:
<?php
3:
/*
4:
* Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
5:
* "PHP & Jquery image upload & crop"
6:
* Date: 2008-11-21
7:
* Ver 1.2
8:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
9:
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
10:
*
11:
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
12:
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
13:
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
14:
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
15:
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
16:
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
17:
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
18:
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
19:
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
20:
*
21:
*/
22:
error_reporting (E_ALL ^ E_NOTICE);
23:
session_start(); //Do not remove this
24:
//only assign a new timestamp if the session variable is empty
25:
if (!isset($_SESSION['random_key']) || strlen($_SESSION['random_key'])==0){
26:
$_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
27:
$_SESSION['user_file_ext']= "";
28:
}
29:
#########################################################################################################
30:
# CONSTANTS #
31:
# You can alter the options below #
32:
#########################################################################################################
33:
$upload_dir = "Images"; // The directory for the images to be saved in
34:
$upload_path = "../../Images/Content/".$upload_dir."/"; // The path to where the image will be saved
35:
$large_image_prefix = "resize_"; // The prefix name to large image
36:
$thumb_image_prefix = "thumbnail_"; // The prefix name to the thumb image
37:
$large_image_name = $large_image_prefix.$_SESSION['random_key']; // New name of the large image (append the timestamp to the filename)
38:
$thumb_image_name = $thumb_image_prefix.$_SESSION['random_key']; // New name of the thumbnail image (append the timestamp to the filename)
39:
$max_file = "25"; // Maximum file size in MB
40:
$max_width = "800"; // Max width allowed for the large image
41:
$thumb_width = "210"; // Width of thumbnail image
42:
$thumb_height = "140"; // Height of thumbnail image
43:
// Only one of these image types should be allowed for upload
44:
$allowed_image_types = array('image/pjpeg'=>"jpg",'image/jpeg'=>"jpg",'image/jpg'=>"jpg",'image/png'=>"png",'image/x-png'=>"png",'image/gif'=>"gif");
45:
$allowed_image_ext = array_unique($allowed_image_types); // do not change this
46:
$image_ext = ""; // initialise variable, do not change this.
47:
foreach ($allowed_image_ext as $mime_type => $ext) {
48:
$image_ext.= strtoupper($ext)." ";
49:
}
50:
51:
52:
##########################################################################################################
53:
# IMAGE FUNCTIONS #
54:
# You do not need to alter these functions #
55:
##########################################################################################################
56:
function resizeImage($image,$width,$height,$scale) {
57:
list($imagewidth, $imageheight, $imageType) = getimagesize($image);
58:
$imageType = image_type_to_mime_type($imageType);
59:
$newImageWidth = ceil($width * $scale);
60:
$newImageHeight = ceil($height * $scale);
61:
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
62:
switch($imageType) {
63:
case "image/gif":
64:
$source=imagecreatefromgif($image);
65:
break;
66:
case "image/pjpeg":
67:
case "image/jpeg":
68:
case "image/jpg":
69:
$source=imagecreatefromjpeg($image);
70:
break;
71:
case "image/png":
72:
case "image/x-png":
73:
$source=imagecreatefrompng($image);
74:
break;
75:
}
76:
imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
77:
78:
switch($imageType) {
79:
case "image/gif":
80:
imagegif($newImage,$image);
81:
break;
82:
case "image/pjpeg":
83:
case "image/jpeg":
84:
case "image/jpg":
85:
imagejpeg($newImage,$image,90);
86:
break;
87:
case "image/png":
88:
case "image/x-png":
89:
imagepng($newImage,$image);
90:
break;
91:
}
92:
93:
chmod($image, 0777);
94:
return $image;
95:
}
96:
//You do not need to alter these functions
97:
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
98:
list($imagewidth, $imageheight, $imageType) = getimagesize($image);
99:
$imageType = image_type_to_mime_type($imageType);
100:
101:
$newImageWidth = ceil($width * $scale);
102:
$newImageHeight = ceil($height * $scale);
103:
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
104:
switch($imageType) {
105:
case "image/gif":
106:
$source=imagecreatefromgif($image);
107:
break;
108:
case "image/pjpeg":
109:
case "image/jpeg":
110:
case "image/jpg":
111:
$source=imagecreatefromjpeg($image);
112:
break;
113:
case "image/png":
114:
case "image/x-png":
115:
$source=imagecreatefrompng($image);
116:
break;
117:
}
118:
imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
119:
switch($imageType) {
120:
case "image/gif":
121:
imagegif($newImage,$thumb_image_name);
122:
break;
123:
case "image/pjpeg":
124:
case "image/jpeg":
125:
case "image/jpg":
126:
imagejpeg($newImage,$thumb_image_name,90);
127:
break;
128:
case "image/png":
129:
case "image/x-png":
130:
imagepng($newImage,$thumb_image_name);
131:
break;
132:
}
133:
chmod($thumb_image_name, 0777);
134:
return $thumb_image_name;
135:
}
136:
//You do not need to alter these functions
137:
function getHeight($image) {
138:
$size = getimagesize($image);
139:
$height = $size[1];
140:
return $height;
141:
}
142:
//You do not need to alter these functions
143:
function getWidth($image) {
144:
$size = getimagesize($image);
145:
$width = $size[0];
146:
return $width;
147:
}
148:
149:
//Image Locations
150:
$large_image_location = $upload_path.$large_image_name.$_SESSION['user_file_ext'];
151:
$thumb_image_location = $upload_path.$thumb_image_name.$_SESSION['user_file_ext'];
152:
153:
//Create the upload directory with the right permissions if it doesn't exist
154:
if(!is_dir($upload_dir)){
155:
mkdir($upload_dir, 0777);
156:
chmod($upload_dir, 0777);
157:
}
158:
159:
//Check to see if any images with the same name already exist
160:
if (file_exists($large_image_location)){
161:
if(file_exists($thumb_image_location)){
162:
$thumb_photo_exists = "<img src=\"".$upload_path.$thumb_image_name.$_SESSION['user_file_ext']."\" alt=\"Thumbnail Image\"/>";
163:
}else{
164:
$thumb_photo_exists = "";
165:
}
166:
$large_photo_exists = "<img src=\"".$upload_path.$large_image_name.$_SESSION['user_file_ext']."\" alt=\"Large Image\"/>";
167:
} else {
168:
$large_photo_exists = "";
169:
$thumb_photo_exists = "";
170:
}
171:
172:
if (isset($_POST["upload"])) {
173:
//Get the file information
174:
$userfile_name = $_FILES['image']['name'];
175:
$userfile_tmp = $_FILES['image']['tmp_name'];
176:
$userfile_size = $_FILES['image']['size'];
177:
$userfile_type = $_FILES['image']['type'];
178:
$filename = basename($_FILES['image']['name']);
179:
$file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));
180:
181:
//Only process if the file is a JPG, PNG or GIF and below the allowed limit
182:
if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {
183:
184:
foreach ($allowed_image_types as $mime_type => $ext) {
185:
//loop through the specified image types and if they match the extension then break out
186:
//everything is ok so go and check file size
187:
if($file_ext==$ext && $userfile_type==$mime_type){
188:
$error = "";
189:
break;
190:
}else{
191:
$error = "Only <strong>".$image_ext."</strong> images accepted for upload<br />";
192:
}
193:
}
194:
//check if the file size is above the allowed limit
195:
if ($userfile_size > ($max_file*1048576)) {
196:
$error.= "Images must be under ".$max_file."MB in size";
197:
}
198:
199:
}else{
200:
$error= "Select an image for upload";
201:
}
202:
//Everything is ok, so we can upload the image.
203:
if (strlen($error)==0){
204:
205:
if (isset($_FILES['image']['name'])){
206:
//this file could now has an unknown file extension (we hope it's one of the ones set above!)
207:
$large_image_location = $large_image_location.".".$file_ext;
208:
$thumb_image_location = $thumb_image_location.".".$file_ext;
209:
210:
//put the file ext in the session so we know what file to look for once its uploaded
211:
$_SESSION['user_file_ext']=".".$file_ext;
212:
213:
move_uploaded_file($userfile_tmp, $large_image_location);
214:
chmod($large_image_location, 0777);
215:
216:
$width = getWidth($large_image_location);
217:
$height = getHeight($large_image_location);
218:
//Scale the image if it is greater than the width set above
219:
if ($width > $max_width){
220:
$scale = $max_width/$width;
221:
$uploaded = resizeImage($large_image_location,$width,$height,$scale);
222:
}else{
223:
$scale = 1;
224:
$uploaded = resizeImage($large_image_location,$width,$height,$scale);
225:
}
226:
//Delete the thumbnail file so the user can create a new one
227:
if (file_exists($thumb_image_location)) {
228:
unlink($thumb_image_location);
229:
}
230:
}
231:
//Refresh the page to show the new uploaded image
232:
header("location:".$_SERVER["PHP_SELF"]);
233:
exit();
234:
}
235:
}
236:
237:
if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
238:
//Get the new coordinates to crop the image.
239:
$x1 = $_POST["x1"];
240:
$y1 = $_POST["y1"];
241:
$x2 = $_POST["x2"];
242:
$y2 = $_POST["y2"];
243:
$w = $_POST["w"];
244:
$h = $_POST["h"];
245:
//Scale the image to the thumb_width set above
246:
$scale = $thumb_width/$w;
247:
$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
248:
//Reload the page again to view the thumbnail
249:
header("location:".$_SERVER["PHP_SELF"]);
250:
exit();
251:
}
252:
253:
254:
if ($_GET['a']=="delete" && strlen($_GET['t'])>0){
255:
//get the file locations
256:
$large_image_location = $upload_path.$large_image_prefix.$_GET['t'];
257:
$thumb_image_location = $upload_path.$thumb_image_prefix.$_GET['t'];
258:
if (file_exists($large_image_location)) {
259:
unlink($large_image_location);
260:
}
261:
if (file_exists($thumb_image_location)) {
262:
unlink($thumb_image_location);
263:
}
264:
header("location:".$_SERVER["PHP_SELF"]);
265:
exit();
266:
}
267:
?>
268:
269:
270:
<!-- ***********
271:
272:
HERE COMES THE BEGINNING OF THE HTML
273:
274:
*********** -->
275:
276:
277:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
278:
<html xmlns="http://www.w3.org/1999/xhtml">
279:
<head>
280:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
281:
<meta name="generator" content="WebMotionUK" />
282:
<title>WebMotionUK - PHP & Jquery image upload & crop</title>
283:
<script type="text/javascript" src="js/jquery-pack.js"></script>
284:
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
285:
</head>
286:
<body>
287:
<!--
288:
* Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
289:
* Date: 2008-11-21
290:
* "PHP & Jquery image upload & crop"
291:
* Ver 1.2
292:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
293:
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
294:
*
295:
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
296:
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
297:
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
298:
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
299:
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
300:
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
301:
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
302:
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
303:
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
304:
*
305:
-->
306:
<?php
307:
//Only display the javacript if an image has been uploaded
308:
if(strlen($large_photo_exists)>0){
309:
$current_large_image_width = getWidth($large_image_location);
310:
$current_large_image_height = getHeight($large_image_location);?>
311:
<script type="text/javascript">
312:
function preview(img, selection) {
313:
var scaleX = <?php echo $thumb_width;?> / selection.width;
314:
var scaleY = <?php echo $thumb_height;?> / selection.height;
315:
316:
$('#thumbnail + div > img').css({
317:
width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px',
318:
height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
319:
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
320:
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
321:
});
322:
$('#x1').val(selection.x1);
323:
$('#y1').val(selection.y1);
324:
$('#x2').val(selection.x2);
325:
$('#y2').val(selection.y2);
326:
$('#w').val(selection.width);
327:
$('#h').val(selection.height);
328:
}
329:
330:
$(document).ready(function () {
331:
$('#save_thumb').click(function() {
332:
var x1 = $('#x1').val();
333:
var y1 = $('#y1').val();
334:
var x2 = $('#x2').val();
335:
var y2 = $('#y2').val();
336:
var w = $('#w').val();
337:
var h = $('#h').val();
338:
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
339:
alert("You must make a selection first");
340:
return false;
341:
}else{
342:
return true;
343:
}
344:
});
345:
});
346:
347:
$(window).load(function () {
348:
$('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview });
349:
});
350:
351:
</script>
352:
<?php }?>
353:
<h1>Photo Upload and Crop</h1>
354:
<?php
355:
//Display error message if there are any
356:
if(strlen($error)>0){
357:
echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
358:
}
359:
if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
360:
echo $large_photo_exists." ".$thumb_photo_exists;
361:
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete&t=".$_SESSION['random_key'].$_SESSION['user_file_ext']."\">Delete images</a></p>";
362:
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."\">Upload another</a></p>";
363:
//Clear the time stamp session and user file extension
364:
$_SESSION['random_key']= "";
365:
$_SESSION['user_file_ext']= "";
366:
}else{
367:
if(strlen($large_photo_exists)>0){?>
368:
<h2>Create Thumbnail</h2>
369:
<div align="center">
370:
<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
371:
<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
372:
<img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
373:
</div>
374:
<br style="clear:both;"/>
375:
<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
376:
<input type="hidden" name="x1" value="" id="x1" />
377:
<input type="hidden" name="y1" value="" id="y1" />
378:
<input type="hidden" name="x2" value="" id="x2" />
379:
<input type="hidden" name="y2" value="" id="y2" />
380:
<input type="hidden" name="w" value="" id="w" />
381:
<input type="hidden" name="h" value="" id="h" />
382:
<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
383:
</form>
384:
</div>
385:
<hr />
386:
<?php } ?>
387:
<h2>Upload Photo</h2>
388:
<form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
389:
Photo <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" />
390:
</form>
391:
<?php } ?>
392:
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
393:
</body>
394:
</html>
395:
396:
