Un script para hacer un upload de una imagen con PHP en el servidor y su envío a Pixlr por medio del API.
Este ejemplo sería un típico caso de uso del API de Pixlr, que estamos explicando en el Manual de uso del API de Pixlr con PHP. En anteriores capítulos ya revisamos lo que era Pixlr y los primeros fundamentos de su API para desarrolladores, por lo que recomendamos su lectura si desconoces esos puntos.
Así pues, en líneas generales esto es lo que hará el script PHP que nos permitiría hacer esta tarea.
Lo primero será comprobar si estamos recibiendo algo desde un formulario. En caso de que no recibamos nada mostraremos un formulario para hacer un upload de un archivo. Si recibimos algo de un formulario, querrá decir que nos están enviando un archivo y tendremos que comprobar si es una imagen y tiene las características que deseábamos. Luego tendremos que guardar la foto subida, si es que se validó correctamente y componer una URL, con una serie de parámetros definidos en la documentación del API, para enviar a Pixlr esa imagen para su edición.
Por cierto, en artículos anteriores de DesarrolloWeb.com ya mostramos cómo se hacía un upload de un archivo con PHP, luego no tendríamos que tener problema con ello.
Veamos el código completo, que está comentado y luego daré algunos comentarios y explicaciones adicionales.
<?php
if (!$_POST){
//si no recibo nada por post, muestro una página con un formulario de carga de la imagen
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>enviando archivo</title>
</head>
<body>
<form action="cargar-imagen-pixrl.php" method="post" enctype="multipart/form-data">
<b>Enviar un nuevo archivo: </b>
<br>
<input name="image" type="file">
<br>
<input type="submit" name="submitir" value="Enviar">
</form>
</body>
</html>
<?php
}else{
//Ver si recibo imagen en $_FILES
if(empty($_FILES['image'])) {
echo "No he recibido la imagen";
exit;
}
//ver si es un upload error
if($_FILES['image']['error'] != UPLOAD_ERR_OK) {
echo "Error escribiendo el archivo al disco ". $_FILES['image']['error'];
}
//Recibo parámetros del archivo de upload
$archivo = $_FILES['image']['tmp_name'];
$tipo = $_FILES['image']['type'];
$nombre_original = $_FILES['image']['name'];
$tamano = $_FILES['userfile']['size'];
//calculo la ruta donde voy a guardar el fichero
//quizás te interesaría editar el $nombre_original para que sea único en tu servidor y no machacar otras fotos y que el nombre del archivo tampoco tenga caracteres raros que puedan molestar.
$ruta_guardar = "images/". $nombre_original;
//aquí podría validar el fichero (esto son sólo un par de validaciones de prueba)
if (strpos($tipo_archivo, "jpg") === 0){
echo "Sólo se permiten archivos jpg";
exit;
}
if ($tamano > (1024 * 1024)){
echo "Sólo se permiten archivos de 1 mega máximo";
}
//Copio el fichero en el servidor
if(!move_uploaded_file($archivo, $ruta_guardar)) {
echo "Error copiando el fichero";
exit;
}
//redirijo al navegador al servicio de edición de la foto en Pixlr
//idioma de la interfaz de pixlr
$parametros = "loc=es";
//imagen que queremos poner para editar
$parametros .= "I=" . urlencode("http://www.desarrolloweb.com/probando/" . $ruta_guardar);
//título de la imagen
$parametros .= "&title=" . urlencode("foto");
//página a la que redirigir en caso que se salgan de pixlr
$parametros .= "&exit=" . urlencode("http://www.desarrolloweb.com");
//method por el que me enviarán los datos de la imagen editada
$parametros .= "&method=GET";
//nombre de mi sitio web, que mostrar a la hora de guardar como
$parametros .= "&referrer=en%20DesarrolloWeb.com";
//página a la que se enviarán los datos de la imagen editada
$parametros .= "&target=" . urlencode("http://www.desarrolloweb.com/probando/salvar-imagen-pixrl.php");
header("Location: http://www.pixlr.com/editor/?" . $parametros);
}
?>
Como se puede ver, la primera parte, en la que se crea el formulario no tiene más problema. La parte que se torna interesante es en la que, por medio de PHP se sube el archivo enviado por el usuario y se guarda en el servidor. Con respecto a este punto habría que comentar que en el servidor tendríamos que hacer las validaciones necesarias para asegurar que ese archivo es correcto y del formato deseado.
En este script PHP el archivo subido se guarda directamente en un directorio llamado images. En nuestro sistema de upload quizás habría que hacer cosas adicionales, como guardar la referencia de la imagen en la base de datos, o renombrar el archivo antes de guardarlo en el servidor, para que tenga un nombre único y no machaque archivos enviados anteriormente por otros usuarios.
En cualquier caso, toda la parte del upload de la imagen no tiene más importancia con respecto al API de Pixlr. Lo que es importante es saber cómo hemos nombrado el fichero y dónde está guardado después de la carga en el servidor. Lo que nos interesará más es la parte en la que se crea la URL para enviar esta imagen a Pixlr. Eso se puede ver en esta parte del código, en la que creamos los parámetros indicados en el API para la URL:
//redirijo al navegador al servicio de edición de la foto en Pixlr
//idioma de la interfaz de pixlr
$parametros = "loc=es";
//imagen que queremos poner para editar
$parametros .= "I=" . urlencode("http://www.desarrolloweb.com/probandoqwerty/" . $ruta_guardar);
//título de la imagen
$parametros .= "&title=" . urlencode("foto");
//página a la que redirigir en caso que se salgan de pixlr
$parametros .= "&exit=" . urlencode("http://www.desarrolloweb.com");
//method por el que me enviarán los datos de la imagen editada
$parametros .= "&method=GET";
//nombre de mi sitio web, que mostrar a la hora de guardar como
$parametros .= "&referrer=en%20DesarrolloWeb.com";
//página a la que se enviarán los datos de la imagen editada
$parametros .= "&target=" . urlencode("http://www.desarrolloweb.com/probandoqwerty/salvar-imagen-pixrl.php");
Con todas estas instrucciones lo que estoy generando es una cadena que crea una serie de parámetros, para enviar a Pixlr y decirle cosas como dónde está la imagen que quiero que abra para editar, el título que tiene, qué quiero que haga una vez el usuario la guarde, etc.
Todos esos parámetros ya los hemos comentado en las notas sobre la documentación del API de Pixlr.
Pero aun así voy a insistir en varios puntos.
- Los datos están viajando por la URL, por lo que quizás deberíamos codificar algunas cadenas a formato URL.
- En el parámetro image le digo dónde está la imagen, indicando la ruta absoluta completa para llegar a ella en el dominio donde la he guardado. Pixlr, cuando se abra, se encargará de recibir este archivo de imagen y de mostrarlo al usuario para su edición.
- Los parámetros Referrer y Target se tienen que indicar juntos, es decir, se necesitan de ambos a la vez para que Pixlr permita guardar la imagen en nuestro servidor, una vez el usuario seleccione Fichero/Guardar en la interfaz de Pixlr.
- Con el parámetro exit indicamos la URL que queremos que Pixlr redirija al usuario en caso que se salga sin llegar a guardar el archivo enviado.
header("Location: http://www.pixlr.com/editor/?" . $parametros);
Con esto está todo lo que necesitamos para enviar el archivo para edición gráfica. En el artículo siguiente veremos cómo recibirlo, una vez editado por el usuario,en una página PHP y salvarlo en nuestro servidor.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...