Header Ads Widget

Ticker

6/recent/ticker-posts

Funcionalidad De Recorte De Imagen En El Cuadro De Modelo Usando PHP

 La carga y el recorte de imágenes es una funcionalidad muy común para cualquier aplicación web. Puede cargar y recortar imágenes en la misma página o en un cuadro modal. En este artículo de PHP, estoy compartiendo la demostración y el código fuente para cargar una imagen recortada usando PHP y jQuery. Hay una gran cantidad de plugins jquery de recorte de imágenes disponibles.

En el artículo anterior, he enumerado los mejores complementos de cultivo de imágenes de Jquery .

Normalmente, se nos brinda la funcionalidad de cambio de imagen / imagen al usuario final, por lo que el usuario puede cargar y recortar la imagen. Esta es una experiencia de usuario increíble para cambiar y recortar la imagen en el cuadro modal. Estoy usando el cuadro modal de arranque para mostrar la opción de carga de imagen.

Se Utilizan El Siguiente Complemento JQuery Y La Biblioteca CSS

  • Biblioteca jQuery: biblioteca base para admitir otros complementos jquery.
  • Bootstrap 3: se utiliza para crear un diseño HTML impresionante para cargar y enviar imágenes.
  • Imgareaselect: Úselo para definir las coordenadas de recorte y la imagen de recorte. Puede descargar desde aquí .
  • Formulario Ajax: se utiliza para enviar el formulario Ajax. Puede descargarlo desde aquí .

En este artículo, estoy usando un Imgareaselectcomplemento para recortar la imagen y PHP para cambiar el tamaño de la imagen y guardar la imagen recortada.

Los Siguientes Archivos Participarán En Este Tutorial De Recorte De Imágenes

  • index.php: este archivo es responsable de crear un diseño HTML y mostrar la imagen recortada.
  • profile.php: este archivo es responsable de todas las funciones del lado del servidor, como recortar y guardar imágenes
  • dist: esta es una carpeta libs, que se usa para guardar todos los archivos de bibliotecas de terceros.

También consulte otro tutorial de recorte de imágenes,

Carga Y Recorte De Imágenes Con PHP Y JQuery

Paso 1: Primero, incluiremos todos los archivos de biblioteca y plugin jquery necesarios. Mantendremos todos los archivos a continuación en la sección principal del index.phparchivo.

Paso 2: Crearemos un divcontenedor para mostrar la imagen y la opción para cambiar la imagen.

Aquí, estoy mostrando el default.jpgarchivo de imagen como una imagen predeterminada de la página de perfil.

Paso 3: Creemos un cuadro de modelo para cargar y recortar la imagen.

Paso 4: Se agregó un código jquery para mostrar el cuadro del modelo. El usuario hará clic en el change picbotón y mostrará el cuadro modal.

Como puede ver el código anterior, estamos en el cuadro modal de arranque de carga de imagen emergente al hacer clic en Change Image.

Paso 5: Cree el complemento de formulario jQuery Ajax para enviar el formulario y muestre la imagen para el proceso de recorte en el cuadro modal de arranque .

Puede obtener una imagen de todos los parámetros en la 'success'función de devolución de llamada.

Paso 6: Recortaremos la imagen y llamaremos al Ajaxmétodo de guardar para guardar la imagen en el almacenamiento del disco duro.

Paso 7: Ahora defina el controlador y el método de acción en el profile.phparchivo.

Paso 8: Crearemos el método Modelo para guardar la ruta de la imagen en la base de datos, lo que ayudará a recuperar la imagen recortada y mostrarla en la página.

Resultado De Recorte De Imagen Usando PHP Y AJAX

Publicar un comentario

0 Comentarios