• Versión
• Descargar 1867
• Tamaño del archivo 278 KB
• Recuento de archivos 1
• Fecha de creación 10 agosto, 2018
• Última actualización 10 agosto, 2018

Descargar recortador de imágenes jQuery

Descargar recortador de imágenes jQuery. En esta publicación implementaremos un sistema para poder recortar imágenes usando los lenguajes de programación jQuery y PHP. Lo que haremos es recortar una determinada imagen, es decir seleccionaremos una parte de la imagen original.

Si vemos en el mercado, observaremos que hay infinidad de programas para lograr el mismo objetivo como es el caso de software Photoshop, entre sus herramientas de diseño tendrá la herramienta Recortar o el muy conocido Corel Draw.

[divider] [button-blue url="https://www.baulphp.com/demo/Como-recortar-imagenes-usando-jQuery-y-PHP/" target="_blank" position="left"]Ver Demo[/button-blue] [divider]

Descargar recortador de imágenes jQuery

Sin embargo, cuando estamos desarrollando sistemas web. Ya sea, un carrito de compras o un proyecto de manejo de imágenes, etc. Por lo tanto, necesitaos de un cortador de imágenes incrustado en nuestro sistema, sin la necesidad de utilizar un software de escritorio.

A continuación, viendo esta problemática, implementaremos un módulo de recorte dentro de nuestro espacio de desarrollo web escrito en php. Ahora, para realizar el efecto de selección y recorte usaremos el potente lenguaje llamado jQuery.

Además, nos apoyaremos en un componente llamado Jcrop para implementar la selección de recorte a la imagen original.

¿Cómo funciona este sistema de recorte?

Al cargar la página web de este ejemplo nos mostrara una imagen por defecto. Sin embargo, si pasamos el puntero del mouse sobre la imagen, este tomara un aspecto de cruz "+", en el cual nos motiva a realizar la selección del área que queremos recortar.

Una vez trazado el área, todavía podemos redimensionar el área seleccionado trasladándolo a otra ubicación de la imagen y/o estirando los cuatro nodos que aparece en las esquinas. Es muy dinámica, seleccionar y editar el área de recorte.

Por último, solo nos queda presionar el botón llamado "Recortar Imagen". Sin embargo, si presionamos este botón desencadenara una acción en el jQuery llamado "#recortar", por lo tanto, este realizara el recorte y mostrara la imagen recortada atreves de un fichero PHP llamado "ImagenRecortada.php".

Ahora, usando una etiqueta de imagen, la imagen será mostrada lista para descarga a nuestro ordenador o lo podemos almacenar en nuestro servidor.