GD2: Resize image one, merge with image two

Question

So, I have a form where people can upload images via AJAX. Once the image has been uploaded they can choose from a list with another image (.png) which they can drag and drop over the first image.

Once they're happy with the result, pressing a button is supposed to merge both images. This worked fine, even with the positions - until I wanted to give the opportunity to resize the second image (the one they can drag and drop over the uploaded image).

The code I have now does not work resizing the small image. In fact, it's not even shown over the uploaded image (the background image). What am I missing here?

//receiving some values from an AJAX call
//those values referes to the background image
$pathToImage = $_POST['pathToImage'];
$posBg = $_POST['posBg'];
$fileUploaded = '../'.$pathToImage;

//those values referes to the image that goes on top of the background
$posTop = $_POST['posTop'];
$posLeft = $_POST['posLeft'];
$itemWidth = $_POST['itemWidth'];
$fileChupon = '../images/chupon1.png';

//my target file
$targetfile = "../images/galeria/testing".time().".png";

//here's the issue.. I am trying to resize the small image that goes on top of the background - this doesn't work and with this piece of code nothing is shown on top of the background
$chuponCreated = imagecreatefrompng($fileChupon);
$newWidth = $itemWidth;
$newHeight = $itemWidth;
$tmp = imagecreatetruecolor($newWidth,$newHeight);
$chupon = imagecopyresampled($tmp, $chuponCreated,0,0,0,0,$newWidth,$newHeight,250,250);

//background image is shown in the dimensions that it's supposed to
$fondo = imagecreatefromjpeg($fileUploaded);
$fondoW = imagesx($fondo);
$fondoH = imagesy($fondo);

$photoFrame = imagecreatetruecolor($fondoW,303);
imagecopyresampled($photoFrame,$fondo,0,$posBg,0,0,$fondoW,$fondoH,$fondoW,$fondoH);

//here trying to add the small image over the background
imagecopy($photoFrame,$chupon,$posLeft,$posTop,0,0,$itemWidth,$itemWidth);
imagejpeg($photoFrame, $targetfile);
$imgPath = $targetfile;
$image = imagecreatefromjpeg($imgPath);
imagejpeg($image);

Thanks in advance!

Answer 1

Well, figured it out... not sure whether this is best practise or not (and probably using ImageMagick, the result would obtain better quality, from what I've heard).

I'll post it anyway, in case someone else would ever need a solution like this.

$pathToImage = $_POST['pathToImage'];
$posBg = $_POST['posBg'];
$posTop = $_POST['posTop'];
$posLeft = $_POST['posLeft'];
$itemWidth = $_POST['itemWidth'];

$fileChupon = '../images/chupon1.png';
$fileUploaded = '../'.$pathToImage;
$targetfile = "../images/galeria/testing".time().".png";

//to resize the second image start
$percent = 0.5;
list($width, $height) = getimagesize($fileChupon);
$newwidth = $width * $percent;
$newheight = $height * $percent;
$chupon = imagecreatetruecolor($newwidth, $newheight);
imagealphablending($chupon, false);
imagesavealpha($chupon,true);
$transparent = imagecolorallocatealpha($chupon, 255, 255, 255, 127);
imagefilledrectangle($chupon, 0, 0, $newwidth, $newheight, $transparent);
$source = imagecreatefrompng($fileChupon);
imagecopyresized($chupon, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
//to resize the second image end

$fondo = imagecreatefromjpeg($fileUploaded);
$fondoW = imagesx($fondo);
$fondoH = imagesy($fondo);


$photoFrame = imagecreatetruecolor($fondoW,303);
imagecopyresampled($photoFrame,$fondo,0,$posBg,0,0,$fondoW,$fondoH,$fondoW,$fondoH);
imagecopy($photoFrame,$chupon,$posLeft,$posTop,0,0,$newwidth,$newheight);
imagejpeg($photoFrame, $targetfile);
$imgPath = $targetfile;
$image = imagecreatefromjpeg($imgPath);
imagejpeg($image);

Sources for my changes are:

PHP.net to resize the image: http://php.net/manual/en/function.imagecopyresized.php

Stackoverflow to make the .png background transparent: https://stackoverflow.com/a/279310/3293843

Saludos!