ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » desde la web http://www.zoneartcss.com Tips de Diseño y Desarrollo Web Wed, 26 Oct 2011 18:31:39 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Cortar Imagenes desde tu Pagina http://www.zoneartcss.com/general/cortar-imagenes-desde-tu-pagina/ http://www.zoneartcss.com/general/cortar-imagenes-desde-tu-pagina/#comments Fri, 31 Jul 2009 01:32:08 +0000 Liz Palacios http://www.zoneartcss.com/?p=396

Cintilla HTML

Hola!! Esta vez les voy a mostrar como utilizar Jcrop es una libreria que junto a Jquery te permite cortar imagenes online (cortar imagenes tipo facebook :) ). La libreria es muy facil de usar!!
Les muestro como:


Paso 1: En nuestro archivo tenemos que colocar este codigo php para generar la imgen que vamos a recortar luego:

1
2
3
4
5
6
7
8
9
10
11
12
13

      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
      $targ_w = $targ_h = 150; // Es el tamaño que tendra nustra imagen al momento de cortarla.
      $jpeg_quality = 90;// Es la calidad que tendra nuestra Imagen.
      $src = 'demo_files/raphaxx3.jpg'; //En este paso seleccionamos que imagen vamos a cargar para luego cortarla.
      $img_r = imagecreatefromjpeg($src);
      $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
      imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
      $targ_w,$targ_h,$_POST['w'],$_POST['h']);
      header('Content-type: image/jpeg');
      imagejpeg($dst_r,null,$jpeg_quality);
      exit;
      }

Paso2 : Incluimos los archivos JavaScript y css de la libreria entre las etiquetas “head”. Sin esto obviamente no va a funcionar:

1

<script src="js/jquery.pack.js"></script> <!-- Incluimos la libreria de jQuery --> <script src="js/jquery.Jcrop.pack.js"></script> <!-- Incluimos la libreria de jQuery - Jcrop -->

Paso3: Tambien dentro de nuestro archivo en el
del archivo pegamos este codigo javascript para generar nuestro archivo para luego cortarlo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

      <script type="text/javascript">
                  jQuery(function(){       
                      jQuery('#cropbox').Jcrop({
                          aspectRatio: 1,
                          onSelect: updateCoords
                      });
 
                  });
 
                  function updateCoords(c)
                  {
                      jQuery('#x').val(c.x);
                      jQuery('#y').val(c.y);
                      jQuery('#w').val(c.w);
                      jQuery('#h').val(c.h);
 
                  };
 
 
                  function checkCoords()
 
                  {
 
                      if (parseInt(jQuery('#x').val())) return true;
 
                      alert('Porfavor seleccione un area de la imagen.'); <!  Configuramos msj de error si no seleccionamos que parte de la imagen vamos a cortar -->
 
                      return false;
 
                  };
</script>

Bueno eso fue todo!!!
Les paso el link del DEMO EN LINEA
Y el LINK de descarga de los Archivos.

]]> http://www.zoneartcss.com/general/cortar-imagenes-desde-tu-pagina/feed/ 0