Header Ads Widget

Ticker

6/recent/ticker-posts

Carga, Recorte Y Cambio De Tamaño De Imágenes Usando PHP, JQuery Y Ajax

 En este artículo, le haré saber cómo cargar, recortar y cambiar el tamaño de imágenes usando PHP y Ajax. Anteriormente publicamos un artículo para cargar y recortar imágenes usando el cuadro emergente . Recibí una gran respuesta de todos ustedes. Hay muchas personas que solicitan compartir un artículo sobre el recorte de imágenes y el cambio de tamaño sin cuadro emergente o cuadro modal. En ocasiones, el cuadro emergente crea un problema en tabletas y dispositivos móviles.

En esta publicación, demostraré la carga y el recorte de imágenes en la misma página en lugar del cuadro modal.Estamos mostrando y ocultando la vista div de la imagen en función de la acción del usuario.Estoy usando la biblioteca PHP GD para cambiar el tamaño de la imagen y el complemento jquery AJAX Form para la carga de imágenes usando AJAX manera Estoy usando el Imgareaselectcomplemento para recortar la imagen y PHP para cambiar el tamaño de la imagen con guardar la imagen recortada.

Hay El Siguiente Complemento JQuery Y La Biblioteca CSS Utilizada En Este Tutorial:

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

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

Resultado De Recorte De Imagen Usando PHP Y AJAX

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, que se usa para guardar todos los archivos de la biblioteca.

Carga, Recorte Y Cambio De Tamaño De Imágenes Con PHP Y Ajax

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

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

Aquí, estoy mostrando el default.jpgarchivo de imagen como imagen predeterminada.

Paso 3: Creemos un div para cargar y recortar la imagen.

Paso 4: Se agregó un código jQuery para mostrar el div Image Crop al hacer clic en el change-picbotón.

El código anterior mostrará el div contenedor de imágenes cargado donde recortarás y guardarás la imagen, también oculto el botón Cambiar imagen.

Paso 5: Usaremos el complemento de formulario jQuery Ajax para enviar el formulario y mostraremos la imagen para el proceso de recorte en la página.

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

Paso 6: Se agregó el código jQuery a la imagen recortada y se llamó al Ajaxmétodo de guardar para guardar la imagen en el almacenamiento del disco duro.

Paso 7: Definiremos controlador / método de acción en profile.php.

Paso 8: Método modelo para guardar la ruta de la imagen en la base de datos.

Publicar un comentario

0 Comentarios