{"id":6667,"date":"2011-06-06T23:59:29","date_gmt":"2011-06-06T21:59:29","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=6667"},"modified":"2022-07-05T17:35:27","modified_gmt":"2022-07-05T15:35:27","slug":"crop-an-image-in-php-using-cwcrop","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2011\/06\/06\/crop-an-image-in-php-using-cwcrop\/","title":{"rendered":"Crop an image in PHP using CwCrop"},"content":{"rendered":"

This post is about how to crop an image with CwCrop<\/a> and PHP on the server. There’s no spectacular php-code to be found (just basic stuff), but as a small example this should be sufficient.<\/p>\n

CwCrop is a mootools plugin to select a rectangular area from an image, it delivers the x- and y-coordinates of the top left corner and the width and height of the selected area. The small example below consists of a single page, which either shows the original image and the crop tool – or the resulting, cropped image.<\/p>\n

Please note: You need PHP 5 with the GD library on your server.<\/p>\n

PHP crop function<\/h4>\n

The following class-function crops a given image ($src_file) to a target file ($target_file) by using imagecopy. Given are the top-left x and y coordinates and width plus height of the area.<\/p>\n

class Imaging\n{\n\tpublic static function cropImage($src_file, $target_file, $x, $y, $width, $height)\n\t{\n\t\tlist($width_orig, $height_orig, $type) = getimagesize($src_file);\n\n\t\tif ($width_orig == 0 || $height_orig == 0) {\n\t\t\treturn false;\n\t\t}\n\t\t\n\t\tif ($type == IMG_JPG) {\n\t\t\t$image = @imagecreatefromjpeg($src_file);\n\t\t}\n\t\telse if ($type == IMG_PNG || $type == 3) { \/\/ php bug seemingly..\n\t\t\t$image = @imagecreatefrompng($src_file);\n\t\t}\n\t\telse if ($type == IMG_GIF) {\n\t\t\t$image = @imagecreatefromgif($src_file);\n\t\t}\n\t\telse {\n\t\t\treturn false;\n\t\t}\n\t\tif (!$image) {\n\t\t\treturn false;\n\t\t}\n\t\t$x = abs(intval($x));\n\t\t$y = abs(intval($y));\n\t\t$width = abs(intval($width));\n\t\t$height = abs(intval($height));\n\t\t\n\t\tif ( $width == 0 || $height == 0 || (($x + $width) > $width_orig) || (($y + $height) > $height_orig) ) {\n\t\t\treturn false;\n\t\t}\n\t\t\n\t\t$image_p = imagecreatetruecolor($width, $height);\n\t\tif ( !imagecopy($image_p, $image, 0, 0, $x, $y, $width, $height) ) {\n\t\t\treturn false;\n\t\t}\n\t\treturn imagejpeg($image_p, $target_file, 95);\n\t}\n}\n<\/pre>\n
PHP inside the page<\/h4>\n
Here we set the directory and filenames. In this case the original image and the cropped result are in the same folder. Note: The directory must be writeable for the webserver and the path is relative to the webserver document-root.<\/p>\n
If we receive the posted values from the form, we read them from the $_POST-array, set our target_file-variable (the result) and crop the source image to this target. If that somehow makes problems, we unset the target_file-variable again.<\/p>\n
$path_images = '\/images\/'; \/\/ modify this\n$src_name = 'original.jpg'; \/\/ modify this\n$target_name = 'cropped-file.jpg'; \/\/ modify this\n$script_self = $_SERVER['PHP_SELF']; \/\/ better: absolute URL here\n\n$src_original = $path_images.$src_name;\nlist($width, $height, $type) = getimagesize($_SERVER['DOCUMENT_ROOT'].$src_original);\n\nif (isset($_POST['crop'])) {\n\n\t$vars = array('x','y','w','h');\n\tforeach ($vars as $var) {\n\t\t$crop[$var] = isset($_POST['crop'][$var]) ? intval($_POST['crop'][$var]) : 0;\n\t}\n\n\t$target_file = $path_images.$target_name;\n\t$res = Imaging::cropImage($_SERVER['DOCUMENT_ROOT'].$src_original, $_SERVER['DOCUMENT_ROOT'].$target_file, $crop['x'], $crop['y'], $crop['w'], $crop['h']);\n\tif (!$res) {\n\t\tunset($target_file);\n\t}\n}\n<\/pre>\n
HTML part of the page<\/h4>\n
This is a simple HTML 5-page, with stylesheet and javascripts. Note that we set the maximal size for cropping to the width and height of the original image, which we found via getimagesize(). Then we either display the resulting image with a random GET-parameter (to circumvent the browser cache) – or the original image along with the HTML for CwCrop and a form.<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<title>CwCrop example<\/title>\n\t<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n\t\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/ysr-crop.css\" media=\"all\">\n\t<script type=\"text\/javascript\" src=\"js\/mootools-1.2.5-core-yc.js\"><\/script>\n\t<script type=\"text\/javascript\" src=\"js\/mootools-1.2.5.1-more.js\"><\/script>\n\t<script type=\"text\/javascript\" src=\"js\/ysr-crop.js\"><\/script>\n\n\t<script type=\"text\/javascript\">\n\t\tvar cwcrop_handler;\n\t\twindow.addEvent(\"domready\", function() {\n\t\t\tcwcrop_handler = new CwCrop({\n\t\t\t\tmaxratio: {x: 1.5, y: 1.5},\n\t\t\t\tminsize: {x: 100, y: 100},\n\t\t\t\tmaxsize: {x: <?=$width ?>, y: <?=$height ?>},\n\t\t\t\tonCrop: function(values) {\n\t\t    \t    document.forms[\"crop\"].elements[\"crop[x]\"].value = values.x;\n\t\t        \tdocument.forms[\"crop\"].elements[\"crop[y]\"].value = values.y;\n\t\t\t        document.forms[\"crop\"].elements[\"crop[w]\"].value = values.w;\n\t\t\t        document.forms[\"crop\"].elements[\"crop[h]\"].value = values.h;\n\t\t    \t\tdocument.forms[\"crop\"].submit();\n\t\t\t    }\n\t\t\t});\n\t\t});\n\t<\/script>\n<body>\n\t<?php if (isset($target_file)) { ?>\n\n\t\t<h3>Cropped Image<\/h3>\n\n\t\t<p><img src=\"<?=$target_file ?>?randomstuff=<?=rand(0, 32768) ?>\" alt=\"Cropped image\"><\/p>\n\t\t<p><button onclick=\"document.location.href='<?=$script_self ?>'\">Try again<\/button><\/p>\n\n\t<?php } else { ?>\n\t\n\t\t<h3>Crop here<\/h3>\n\n\t\t<div id=\"imgouter\">\n\t\t\t<div id=\"cropframe\" style=\"background-image: url('<?=$src_original ?>')\">\n\t\t\t\t\t<div id=\"draghandle\"><\/div>\n\t\t\t\t\t<div id=\"resizeHandleXY\" class=\"resizeHandle\"><\/div>\n\t\t\t\t\t<div id=\"cropinfo\" rel=\"Click to crop\">\n\t\t\t\t\t\t<div title=\"Click to crop\" id=\"cropbtn\"><\/div>\n\t\t\t\t\t\t<div id=\"cropdims\"><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div id=\"imglayer\" style=\"width: <?=$width ?>px; height: <?=$height ?>px; padding: 1px; background-position: center center; background-image: url('<?=$src_original ?>')\">\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<form name=\"crop\" method=\"post\" action=\"<?=$script_self ?>\">\n\t\t\t<p><button onclick=\"cwcrop_handler.doCrop()\">Crop<\/button><\/p>\n\n\t\t\t<input type=\"hidden\" name=\"crop[x]\" value=\"0\">\n\t\t\t<input type=\"hidden\" name=\"crop[y]\" value=\"0\">\n\t\t\t<input type=\"hidden\" name=\"crop[w]\" value=\"0\">\n\t\t\t<input type=\"hidden\" name=\"crop[h]\" value=\"0\">\n\t\t<\/form>\n\t\t\n\t<?php } ?>\n<\/body>\n<\/html>\n<\/pre>\n
All together<\/h4>\n
You can download all required files here \u00bb<\/a>. If you use this, be sure to change the path settings in the php-part (with “modify this”), your image folder (which must be writeable!) and the paths for your CSS and JavaScript-files.<\/p>\n","protected":false},"excerpt":{"rendered":"
This post is about how to crop an image with CwCrop and PHP on the server. There’s no spectacular php-code to be found (just basic stuff), but as a small example this should be sufficient.<\/p>\n","protected":false},"author":2,"featured_media":1911,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8,14],"tags":[56,57,55,10,40],"class_list":["post-6667","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdevelopment","category-javascript","tag-crop","tag-html","tag-javascript-mootools","tag-mootools","tag-php"],"jetpack_featured_media_url":"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/10\/cwcrop-screenshot.png","jetpack_shortlink":"https:\/\/wp.me\/paPEN-1Jx","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/6667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/comments?post=6667"}],"version-history":[{"count":1,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/6667\/revisions"}],"predecessor-version":[{"id":8329,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/6667\/revisions\/8329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media\/1911"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=6667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/categories?post=6667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/tags?post=6667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}