1

I am trying to crop an image, using some part of the image but also allowing for 'extra' space to be added around it. However when the cropped image generates black space in the 'extra' space, when I want it to be transparent.

Using cropper JavaScript to get crop coordinates: https://fengyuanchen.github.io/cropperjs/

Then use of PHP imagecopyresampled to crop the image to size.

The cropping of the image is fine, however if I crop an image to larger than the original size it adds black space around the image, I want to change this to transparent.

Looked into searching the croppped image for black pixels and converting them to transparent, however this idea breaks when the image has a black in it

 Current php code: (asuming file type is PNG)

 //$cropData 
 //is an array of data passed through from the cropper containing the original width and height, new width and height and the cropping x and y coordinates.

 //passed in image to be cropped
 $current_image = "/folder/example.jpg";

 //image file location of cropped image
 $image_name = "/folder/cropped_example.jpg";


 //create blank image of desired crop size
 $width = $cropData["width"];
 $height = $cropData["height"];
 $background = imagecreatetruecolor($width, $height);

 //crop coordinates
 $crop_x = $cropData["x"];
 $crop_y = $cropData["y"];

 //create resouce image of current image to be cropped
 $image = imagecreatefrompng($current_image);

 //crop image
 imagecopyresampled($background, $image, 0, 0, $crop_x, $crop_y, $width, $height, $width, $height)){


 imagepng($background, $image_name);


 //File Uploaded... return to page
Cerbrus
  • 70,800
  • 18
  • 132
  • 147
Sam
  • 31
  • 1
  • 2
    Possible duplicate of [Can PNG image transparency be preserved when using PHP's GDlib imagecopyresampled?](https://stackoverflow.com/questions/32243/can-png-image-transparency-be-preserved-when-using-phps-gdlib-imagecopyresample) – misorude Jul 23 '19 at 11:35

1 Answers1

0
  1. First you need to enable alpha channel by passing true to imagesavealpha
  2. Next step is to disable alphablending by passing false to imagealphablending Otherwise the alpha channel will be used to recalculate colors and its value will be lost.
  3. Allocate a transparent color passing 127 as alpha value to imagecolorallocatealpha
  4. Fill the background of the source image by this color (e.g. calling imagefilledrectangle)
  5. When passing source width and height parameters to imagecopyresampled do not exceed the real size of the image, otherwise out-of-bounds area will be assumed as opaque black.

Example:

 $background = imagecreatetruecolor($width, $height);

 //crop coordinates
 $crop_x = 10;
 $crop_y = 10;

 imagesavealpha($background, true); // alpha chanel will be preserved
 imagealphablending($background, false); // disable blending operations
 $transparent_color = imagecolorallocatealpha($background, 0, 0, 0, 127); // allocate transparent
 imagefilledrectangle($background, 0, 0, $width, $height, $transparent_color); // fill background

 //create resouce image of current image to be cropped
 $image = imagecreatefrompng($current_image);

 // Limit source sizes;
 $minw = min($width, imagesx($image));
 $minh = min($height, imagesy($image));

 //crop image
 imagecopyresampled($background, $image, 0, 0, $crop_x, $crop_y, $minw, $minh, $minw, $minh);

 imagepng($background, $image_name);
 // done!
AterLux
  • 4,566
  • 2
  • 10
  • 13