Cambiar el tamaño y recortar imagen usando PHP y jQuery
Cambiar el tamaño y recortar imagen usando PHP y jQuery
Cambiar el tamaño y recortar imagen usando PHP y jQuery es muy útil y técnica importante para ahorrar espacio y ancho de banda y que también disminuyen la página de tiempo de ejecución y cargue la página web mucho faster.
Crop la imagen cuando se desea una parte particluar de una imagen para mostrar como la única cara y la puesta del sol detrás de ti etc.
Si ambos son muy útiles y técnica importante que puede hacer con su images.In este tutorial vamos a tamaño y recorte de una imagen utilizando PHP y jQuery.
También le comprimir y cambiar el tamaño de la imagen antes de subirlo a base de datos mediante PHP
Paso 1.Make un archivo HTML y definir marcado y guión de tamaño y recorte
Hacemos un archivo HTML y guardarlo con un nombre crop.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="crop_style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript"> $(function() { $( "#crop_div" ).draggable({ containment: "parent" }); }); function crop() { var posi = document.getElementById('crop_div'); document.getElementById("top").value=posi.offsetTop; document.getElementById("left").value=posi.offsetLeft; document.getElementById("right").value=posi.offsetWidth; document.getElementById("bottom").value=posi.offsetHeight; return true; } </script> </head> <body> <div id="crop_wrapper"> <img src="images/image1.jpg"> <div id="crop_div"> </div> </div> <form method="post" action="do_crop.php" onsubmit="return crop();"> <input type="hidden" value="" id="top" name="top"> <input type="hidden" value="" id="left" name="left"> <input type="hidden" value="" id="right" name="right"> <input type="hidden" value="" id="bottom" name="bottom"> <input type="submit" name="crop_image"> </form> </body> </html>
En primer lugar usted necesita para descargar el plugin de jQuery UI para hacer un div que pueden arrastrarse de manera que el usuario puede arrastrar el div y seleccione la parte deseada de una imagen para cropping.
En este paso hemos hecho dos div “crop_wrapper”, que es el contenedor de la imagen y pueda arrastrar div y “crop_div” es el que pueden arrastrarse div.
Se hizo un cultivo de función () que consiguen la dimensión de la imagen y luego enviar todos los datos después de enviar el formulario a do_crop.php de archivos para realizar cropping.You también tener gusto añadir marcas de agua en la imagen mediante PHP
Paso 2.Make un archivo PHP para cambiar el tamaño y recortar la imagen
Hacemos un archivo PHP llamado do_crop.php
<?php if(isset($_POST['crop_image'])) { $y1=$_POST['top']; $x1=$_POST['left']; $w=$_POST['right']; $h=$_POST['bottom']; $image="images/image1.jpg"; list( $width,$height ) = getimagesize( $image ); $newwidth = 600; $newheight = 400; $thumb = imagecreatetruecolor( $newwidth, $newheight ); $source = imagecreatefromjpeg($image); imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); imagejpeg($thumb,$image,100); $im = imagecreatefromjpeg($image); $dest = imagecreatetruecolor($w,$h); imagecopyresampled($dest,$im,0,0,$x1,$y1,$w,$h,$w,$h); imagejpeg($dest,"images/crop_image.jpg", 100); } ?>
En este paso de tamaño y recorte la imagen usando la librería GD de PHP y obtenemos toda la dimensión de la primera crop_div.We cargar la imagen de la carpeta también se puede crear un formulario de carga para cargar la imagen.
Sube imagen y entonces redimensionar la imagen de 600px por 400px porque definimos tamaño de la imagen de 600px por 400px en nuestro archivo CSS ya que si la imagen es más grande o más pequeña que la imagen en pantalla a continuación, se obtiene dimensión diferente de crop_div.It
Es muy importante para cambiar el tamaño la imagen con mismo tamaño que la imagen de mostrar si subes una imagen o de la carga sólo de folder.And función a continuación, utilizamos imagecopyresampled () y después de que utilice la función imagejpeg () para crear la imagen recortada y guardarlo con el nombre crop_image. gif.
Paso 3.Make un archivo CSS y definir un estilo para cambiar el tamaño y recorte
Hacemos un archivo CSS y guardarlo con el nombre crop_style.css.
body { margin:0px; padding:0px; } #crop_wrapper { position:relative; margin-left:150px; margin-top:50px; width:600px; height:400px; } #crop_wrapper img { width:600px; height:400px; } #crop_div { width:300px; height:200px; border:1px dashed white; position:absolute; top:0px; box-sizing:border-box; }
Eso es todo, esta es la forma de cambiar el tamaño y recortar imagen Uso de PHP y jQuery.You puede modificar este código adicional como por su exigencia.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros