Drawing a grid with coordinates in each cell onto existing image - php

Question

I'm trying to make a function that takes a JPG file, add a grid overlay, and in each cell write in text A1, A2, A3 and so on.
The current code (below) only draws the grid, with a static column/row size.
Question 1) How can I add the coordinates as text in each cell? E.g rows are letters, and columns are numbers. So first row is A1, A2, A3 ... and next row is B1, B2, B3.
Question 2) How can I modify it, so that I specify just how many rows and columns I want, and it will automatically adjust the size of the col/rows accordingly to fit the dimensions of the input image?
function draw_grid(&$img, $x0, $y0, $width, $height, $cols, $rows, $color) {
imagesetthickness($img, 5);
//draw outer border
imagerectangle($img, $x0, $y0, $x0+$width*$cols, $y0+$height*$rows, $color);
//first draw horizontal
$x1 = $x0;
$x2 = $x0 + $cols*$width;
for ($n=0; $n<ceil($rows/2); $n++) {
$y1 = $y0 + 2*$n*$height;
$y2 = $y0 + (2*$n+1)*$height;
imagerectangle($img, $x1,$y1,$x2,$y2, $color);
}
//then draw vertical
$y1 = $y0;
$y2 = $y0 + $rows*$height;
for ($n=0; $n<ceil($cols/2); $n++) {
$x1 = $x0 + 2*$n*$width;
$x2 = $x0 + (2*$n+1)*$width;
imagerectangle($img, $x1,$y1,$x2,$y2, $color);
}
}
$imgpath = "foto/306/306.jpg";
$img = imagecreatefromjpeg($imgpath);
$size = getimagesize($imgpath);
$width = $size[0];
$height = $size[1];
$red = imagecolorallocate($img, 255, 0, 0);
draw_grid($img, 0,0, $width /10 , $height /10 ,20,10,$red);
header("Content-type: image/jpg");
imagejpeg($img);
imagedestroy($img);

Answer 1

As described in my comment, your current code is only drawing the outlines. This is fine for drawing a Grid, but if you wish to add some text to the cell, you have to draw each rectangle manual, and use those coordinates to place the text.
Using imagettfbbox, you can calculate the width/height of the text, you'll need that information to 'center' the text in to the cell.
Regarding your second question, dividing the total picture width with the number of cells you want so you'll know the size of each individual cell.
I've updated your code to show the general idea of calculation the x/y coordinates
<?php
$imgpath = "duck.jpg";
$img = imagecreatefromjpeg($imgpath);
$size = getimagesize($imgpath);
$width = $size[0];
$height = $size[1];
$red = imagecolorallocate($img, 255, 0, 0);
// Number of cells
$xgrid = 5;
$ygrid = 5;
// Calulate each cell width/height
$xgridsize = $width / $xgrid;
$hgridsize = $height / $ygrid;
// Remember col
$c = 'A';
// Y
for ($j=0; $j < $ygrid; $j++) {
// X
for ($i=0; $i < $xgrid; $i++) {
// Dynamic x/y coords
$sy = $hgridsize * $j;
$sx = $xgridsize * $i;
// Draw rectangle
imagerectangle($img, $sx, $sy, $sx + $xgridsize, $sy + $hgridsize, $red);
// Draw text
addTextToCell($img, $sx, $xgridsize, $sy + $hgridsize, $hgridsize, $c . ($i + 1));
}
// Bumb cols
$c++;
}
function addTextToCell($img, $cellX, $cellWidth, $cellY, $cellHeight, $text) {
// Calculate text size
$text_box = imagettfbbox(20, 0, 'OpenSans', $text);
$text_width = $text_box[2]-$text_box[0];
$text_height = $text_box[7]-$text_box[1];
// Calculate x/y position
$textx = $cellX + ($cellWidth / 2) - $text_width;
$texty = $cellY - ($cellHeight / 2) - $text_height;
// Set color and draw
$color = imagecolorallocate($img, 0, 0, 255);
imagettftext($img, 20, 0, $textx, $texty, $color, 'OpenSans', $text);
}
// Save output as file
imagejpeg($img, 'output.jpg');
imagedestroy($img);
shell_exec('open -a Preview output.jpg');

Answer 2

1) Check out the imagettftext() and imagefttext() functions. One of those should do what you want.
2) Divide the width and height of the input image by the number of columns and rows respectively that you want to divide it into to get the width and height of each cell.