combine 16 images into 1 big image with php

Question

I have 16 images each image with size of 512 , I need to combine them using PHP 4 rows and 4 columns (4X4) and then save the new Image.

I have tried this but it doesnt seem to work !

<?php
 $stars = imagecreatefrompng("images/1.jpg");
 $gradient = imagecreatefrompng("images/2.jpg");
 imagecopymerge($stars, $gradient, 0, 0, 0, 0, 256, 256, 60);
 header('Content-type: image/png');
 imagepng($stars);
 imagedestroy($stars);
 imagedestroy($gradient);
?>

how can i make script that do that ?

Answer 1

Step 1: get an array with source image locations This step is different for anybody, but in its easiest form you would define something like this:

$srcImagePaths = Array('https://diceattack.files.wordpress.com/2011/01/tile_e_o_fh.png',
'https://diceattack.files.wordpress.com/2011/01/tile_e_g_fh.png',
'https://diceattack.files.wordpress.com/2011/01/tile_e_b_fh.png',
'https://diceattack.files.wordpress.com/2011/01/tile_b_q_fh.png');

Step 2: define some measures and initialize a blank ‘background’ image Here we use the first GD functions: imagecreatetruecolor() creates a generic ‘base’ image, imagecolorallocate() to define an RGB color and imagefill() to fill our generic image with that color.

$tileWidth = $tileHeight = 28;
$numberOfTiles = 12;
$pxBetweenTiles = 1;

$mapWidth = $mapHeight = ($tileWidth + $pxBetweenTiles) * $numberOfTiles;

$mapImage = imagecreatetruecolor($mapWidth, $mapHeight);
$bgColor = imagecolorallocate($mapImage, 50, 40, 0);
imagefill($mapImage, 0, 0, $bgColor);

Step 3:
think at which coordinates you want your source images to end up There are some different ways to specify this, but if you are dealing with many images of the same size it makes sense to write a small function that maps an (array) index to a set of X,Y coordinates. Here is mine which arranges them all in a 12×12 square grid:

function indexToCoords($index)
{
 global $tileWidth, $pxBetweenTiles, $leftOffSet, $topOffSet, $numberOfTiles;

 $x = ($index % $numberOfTiles) * ($tileWidth + $pxBetweenTiles) + $leftOffSet;
 $y = floor($index / $numberOfTiles) * ($tileWidth + $pxBetweenTiles) + $topOffSet;
 return Array($x, $y);
}

Step 4: loop over the source images and copy them on the base image We use function imagecopy() to do this, like this:

/* * COPY SOURCE IMAGES TO MAP */

foreach ($srcImagePaths as $index => $srcImagePath)
{
 list ($x, $y) = indexToCoords($index);
 $tileImg = imagecreatefrompng($srcImagePath);

 imagecopy($mapImage, $tileImg, $x, $y, 0, 0, $tileWidth, $tileHeight);
 imagedestroy($tileImg);
}

Note how we used the indexToCoords() function in there – we do not want all the >source images on the same position of course.

Step 5 (intermezzo): resizing an image with PHP The same imagecopy() function we used to put our source images on the base image can also be used to resize images. Handy if you want to generate thumbnails automatically! Here’s how you can do that:

/* * RESCALE TO THUMB FORMAT */

$thumbSize = 200;
$thumbImage = imagecreatetruecolor($thumbSize, $thumbSize);
imagecopyresampled($thumbImage, $mapImage, 0, 0, 0, 0, $thumbSize, $thumbSize, $mapWidth, $mapWidth);

Final step: set header to tell the browser there’s an image coming, and output the final image

/* * OUTPUT THUMBNAIL IMAGE */

header ("Content-type: image/png");
imagepng($thumbImage); //change argument to $mapImage to output the original size image

And that’s it! Note that you may not want a uniformly filled background but rather a real background image – you can easily do this by using imagecreatefrompng() in step 2.

Here’s all the code once more together for convenience.

<?php

//Source image paths (DISCLAIMER: this is just to demonstrate, to generate a real TT map you need 144 of these)
<pre>$srcImagePaths = Array('https://diceattack.files.wordpress.com/2011/01/tile_e_o_fh.png',
'https://diceattack.files.wordpress.com/2011/01/tile_e_g_fh.png',
'https://diceattack.files.wordpress.com/2011/01/tile_e_b_fh.png',
'https://diceattack.files.wordpress.com/2011/01/tile_b_q_fh.png');
</pre>
/*
 * INIT BASE IMAGE FILLED WITH BACKGROUND COLOR
 */

$tileWidth = $tileHeight = 28;
$numberOfTiles = 12;
$pxBetweenTiles = 1;
$leftOffSet = $topOffSet = 1;

$mapWidth = $mapHeight = ($tileWidth + $pxBetweenTiles) * $numberOfTiles;

$mapImage = imagecreatetruecolor($mapWidth, $mapHeight);
$bgColor = imagecolorallocate($mapImage, 50, 40, 0);
imagefill($mapImage, 0, 0, $bgColor);

/*
 *  PUT SRC IMAGES ON BASE IMAGE
 */

function indexToCoords($index)
{
 global $tileWidth, $pxBetweenTiles, $leftOffSet, $topOffSet, $numberOfTiles;

 $x = ($index % 12) * ($tileWidth + $pxBetweenTiles) + $leftOffSet;
 $y = floor($index / 12) * ($tileWidth + $pxBetweenTiles) + $topOffSet;
 return Array($x, $y);
}

foreach ($srcImagePaths as $index => $srcImagePath)
{
 list ($x, $y) = indexToCoords($index);
 $tileImg = imagecreatefrompng($srcImagePath);

 imagecopy($mapImage, $tileImg, $x, $y, 0, 0, $tileWidth, $tileHeight);
 imagedestroy($tileImg);
}

/*
 * RESCALE TO THUMB FORMAT
 */
$thumbSize = 200;
$thumbImage = imagecreatetruecolor($thumbSize, $thumbSize);
imagecopyresampled($thumbImage, $mapImage, 0, 0, 0, 0, $thumbSize, $thumbSize, $mapWidth, $mapWidth);

header ("Content-type: image/png");
imagepng($thumbImage);

?>

Source

It will definitely work . Used my self several times :)