En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.
Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.
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:
1. <div class="contenedor"
2. onclick="posicionaMarco(event)"
3. onmousemove="despliegaMarco(event)">
4. <img src="foto.jpg" alt="Foto" />
5. <span id="marco"></span>
6. </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.
1. var _IE_ = navigator.userAgent.indexOf("MSIE") != -1; // Si es IE
2. var inicio = false;
3. var xini = 0;
4. var yini = 0;
5. var xfin = 0;
6. var yfin = 0;
7.
8. function posicionaMarco(e) {
9. inicio = !inicio;
10. var marco = document.getElementById("marco");
11.
12. if (inicio) {
13. marco.style.display = "block";
14.
15. // En IE y Opera se usa otra propiedad del evento
16. if (_IE_) {
17. xini = e.offsetX;
18. yini = e.offsetY;
19. } else {
20. xini = e.layerX;
21. yini = e.layerY;
22. }
23. marco.style.left = xini+"px";
24. marco.style.top = yini+"px";
25. marco.style.width = "0px";
26. marco.style.height = "0px";
27. }
28. }
Usuarios que han visto este tema también han visto...
- Subir archivos con PHP por FTP
- Faq sobre sesiones. En qué consisten las sesiones, que funciones se deben usar y cómo usarlas son algunas de las preguntas que respondemos aquí.
- Instala PHP en tu servidor ISS con esta estupenda guía.
- Eliminar publicidad de los hosting gratuitos
- Otra forma de medir tiempo de ejecución
- Versión imprimible de este documento
- Enviar por e-mail este documento
