Si las imágenes son de distinto tamaño diremos que son distintas imágenes, no nos pararemos a ver el contenido. Si tienen el mismo tamaño, buscaremos que parte de la imagen es la que ha cambiado y la señalaremos con un rectángulo rojo.

El funcionamiento del script es sencillo:

• Primero recibimos las dos imágenes (en este caso ambas son PNG para facilitar el script), si la imagen seleccionada no se ha elegido, se devuelve la imagen original (esto es solo para evitar dar un error).
• Se cargan las dos imágenes.
• Si las imágenes tienen distinto tamaño se devuelve una imagen del tamaño de la original con un texto que indica que son de distinto tamaño.
• Si las imágenes tienen el mismo tamaño se comprueba el contenido de ambas, se van recorriendo ambas imágenes punto a punto (usando coordenadas x e y) comprobando el color rgb de ambas.
• Si no ha habido diferencias entre las imágenes se devuelve una imagen del tamaño de la original con un texto que indica que son la misma imagen.
• Cuando se encuentra un punto con distinto color en las dos imágenes, se comprueba si el punto es el que tiene menor X o menor Y encontrado y si es así nos quedamos con la coordenada X o Y menor, igual para el punto mayor. Así lo que conseguimos es el recuadro que enmarca todos los puntos diferentes entre ambas imágenes. Cuando hemos acabado de recorrer las imágenes, devolvemos la imagen seleccionada con el recuadro dibujado.

<?php
// Cargamos las imágenes
$origen = $_GET["img1"];
$destino = $_GET["img2"];
$im1 = imagecreatefrompng (getcwd()."/".$origen);
if (!$destino) {
header("Content-type: image/png");
imagepng($im1);
} else {
$im2 = imagecreatefrompng (getcwd()."/".$destino);
// Creamos la imagen resultante
$im3 = imagecreate(ImageSX($im1), ImageSY($im1));
if (ImageSX($im1) == ImageSX($im2) && ImageSY($im1) == ImageSY($im2)) {
// Tienen el mismo tamaño
$rojo = imagecolorallocate($im3, 255, 0, 0);
// Compruebo la zona que tiene distintos pixels
$xmin = ImageSX($im1);
$xmax = 0;
$ymin = ImageSY($im1);
$ymax = 0;
$ok = false;
for ($j= 0; $j<ImageSY($im1); $j++) {
for ($i= 0; $i<ImageSX($im1); $i++) {
$rgb1 = imagecolorat($im1, $i, $j);
$rgb2 = imagecolorat($im2, $i, $j);
if ($rgb1 != $rgb2) {
$ok = true;
$xmin = ($i < $xmin)? $i : $xmin;
$ymin = ($j < $ymin)? $j : $ymin;
$xmax = ($i > $xmax)? $i : $xmax;
$ymax = ($j > $ymax)? $j : $ymax;
}
}
}
if (!$ok) {
// Son iguales
$negro = imagecolorallocate($im3, 0, 0, 0);
imagestring($im3, 10, 5, 5, "Son iguales", $negro);
} else {
// Son distintas
// Copio la imagen 2 sobre la resultante
imagecopy($im3, $im2, 0, 0, 0, 0, ImageSX($im2), ImageSY($im2));
// Señalo donde difieren
imagerectangle($im3, $xmin, $ymin, $xmax, $ymax, $rojo);
}
} else {
$rojo = imagecolorallocate($im3, 255, 0, 0);
$negro = imagecolorallocate($im3, 0, 0, 0);
imagestring($im3, 10, 5, 5, "Distinto ancho y alto", $negro);
}
/* Devolvemos la imagen */
header("Content-type: image/png");
imagepng($im3);
}
?>

Primero es crear la página web que muestra la imagen y permite recortarla. Constará de una capa que contiene la imagen y de otra capa (span) que se usará para crear el marco de selección. Bueno, también hay una capa que mostrará la imagen resultante, pero esto no es necesario, solo es para mostrar el resultado en la misma página.

El HTML necesario para contener la imagen es el siguiente:

<div class="contenedor"
onclick="posicionaMarco(event)"
onmousemove="despliegaMarco(event)">
<img src="foto.jpg" alt="Foto" />
<span id="marco"></span>
</div>

La capa contenedor tendrá dos eventos que serán controlados:

• onclick: cuando se pincha en la imagen se empecerá/finalizará la selección de la zona de la imagen que queremos recortar.
• onmousemove: mientras se mueva el ratón por la imagen se creará el marco que indica que zona de la imagen se está seleccionando. En este caso, para no complicar la explicación del efecto, obligamos a que la selección se haga de izquierda-derecha y de arriba-abajo.

Los estilos solo hay que destacar que la capa contenedora debe tener el mismo tamaño que la imagen para evitar seleccionar más de la cuenta y que luego falle el script PHP, y que la capa marco debe tener el borde visible, en este caso sólido, rojizo y de 2 píxeles de grosor.

Cuando pinchamos en la imagen almacenamos la posición x e y del ratón, ya que será la esquina superior izquierda y luego inicializar los valores del marco.

var _IE_ = navigator.userAgent.indexOf("MSIE") != -1; // Si es IE
var inicio = false;
var xini = 0;
var yini = 0;
var xfin = 0;
var yfin = 0;
function posicionaMarco(e) {
inicio = !inicio;
var marco = document.getElementById("marco");
if (inicio) {
marco.style.display = "block";
// En IE y Opera se usa otra propiedad del evento
if (_IE_) {
xini = e.offsetX;
yini = e.offsetY;
} else {
xini = e.layerX;
yini = e.layerY;
}
marco.style.left = xini+"px";
marco.style.top = yini+"px";
marco.style.width = "0px";
marco.style.height = "0px";
}
}

Cuando se mueve el ratón por la superficie de la imagen (realmente de la capa), almacenamos la esquina inferior derecha del marco y modificamos el ancho y alto.

function despliegaMarco(e) {
if (inicio) {
var marco = document.getElementById("marco");
// En IE y Opera se usa otra propiedad del evento
// El 7 es para evitar que el ratón se solape con el marco y nos dé problemas
if (_IE_) {
xfin = e.offsetX-7;
yfin = e.offsetY-7;
} else {
xfin = e.layerX-7;
yfin = e.layerY-7;
}
// El 5 es para que haya un tamaño mínimo
if (xfin > xini+5) {
marco.style.width = (xfin-xini)+"px";
}
if (yfin > yini+5) {
marco.style.height = (yfin-yini)+"px";
}
}
}

Ya tenemos el HTML que nos permite seleccionar la zona de la imagen, ahora solo hace falta el script PHP. El funcionamiento es sencillo, carga la imagen, crea una imagen nueva con el tamaño final que debe tener y copiamos la zona que queremos recortar de la imagen en la nueva imagen. Por último devolvemos la imagen nueva.

<?php
// Abre la imagen
$fichero = getcwd()."/".$_GET["img"];
if (preg_match('/.png$/', $fichero)) {
$img = imagecreatefrompng($fichero);
} else if (preg_match('/.gif$/', $fichero)) {
$img = imagecreatefromgif($fichero);
} else if (preg_match('/.jpg$/', $fichero)) {
$img = imagecreatefromjpeg($fichero);
}
$xini = $_GET["xini"];
$yini = $_GET["yini"];
$xfin = $_GET["xfin"];
$yfin = $_GET["yfin"];
$res = imagecreatetruecolor (
$xfin-$xini, $yfin-$yini);
imagecopy($res, $img, 0, 0,
$xini, $yini,
$xfin-$xini, $yfin-$yini);
header("Content-type: image/png");
imagepng($res);
?>

Se le pueden añadir más funcionalidades, pero para ir empezando creo que está bien así.

Ejemplo

Te puedes bajar las fuentes aquí