php – Crop image with JavaScript

Question:

I need to upload a photo and then put it in a modal for the user to do a 4/3 proportional cropping a brief web search I found this jQuery jCrop plugin.

It seems to give me the coordinates to crop the images, but I have no idea how to integrate it with PHP. If anyone has a practical example they would be very welcome.

Answer:

To crop the photo you need to use a PHP extension that manipulates images, the best known are GD and ImageMagick .

Simple implementation for PHP 5 >=5.5 using GD

$ini_filename = 'imagens/img.jpg'; // path da imagem
$im = imagecreatefromjpeg($ini_filename); // criando instancia jpeg

//definindo coordenadas de corte
$to_crop_array = array('x' =>20 , 'y' => 20, 'width' => 200, 'height'=> 200); 
$thumb_im = imagecrop($im, $to_crop_array); // recortando imagem

imagejpeg($thumb_im, 'imagens/new_img.jpg', 100); // salvando nova instancia

Example based on


jQuery Picture Cut

If you want I recommend this plugin jQuery is very simple to implement and complete has both client-side and server-side implementations.

HTML

<div id="container_image"></div>

JavaScript

$("#container_image").PictureCut({                    
    InputOfImageDirectory       : "image",
    PluginFolderOnServer        : "/jquery.picture.cut/",
    FolderOnServer              : "/uploads/",    
    EnableCrop                  : true,
    CropWindowStyle             : "Bootstrap",              
});

server side implementation

demo

Documentation

Scroll to Top