You are here
Cambiar el tamaño y recortar imagen usando PHP y jQueryNoticias 

Cambiar el tamaño y recortar imagen usando PHP y jQuery

BlogUneWeb

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

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts