Text Resizer Text Resizer
February 8th, 2012
You're browsing: Scriptmatico.Com » General » Facebook Sliders Con Mootools and CSS – Ahora Con Generacion de Imagen en PHP

Facebook Sliders Con Mootools and CSS – Ahora Con Generacion de Imagen en PHP

Posted on feb 18 in Generalby PrintText Resizer Text Resizer


En el Blog de david walsh, me he encontrado con estos utiles Sliders echos con CSS y Usando Mootools, lo mejor de estos Sliders es que permiten redimencionar una imagen y guardar los cambios, bien el codigo usado en este proyecto es el siguiente:

HTML

PLAIN TEXT
HTML:
  1. <img src="muse.jpg" id="muse" />
  2.  
  3. <div id="opacity-area">
  4.     <div id="opacity-slider"></div>
  5.  
  6. </div>
  8.     <strong>Opacity:</strong> <span id="opacity-label"></span>%
  9. </div>
  10. <br /><br />
  11.  
  12. <div id="width-area">
  13.     <div id="width-slider"></div>
  14. </div>
  16.     <strong>Width:</strong> <span id="width-label"></span> pixels
  17.  
  18. </div>
  19. <br /><br />
  20.  
  21. <div id="height-area">
  22.     <div id="height-slider"></div>
  23. </div>
  25.     <strong>Height:</strong> <span id="height-label"></span> pixels
  26. </div>
  27. <br /><br />
  28. <p><a href="#" id="save-image">Save Customized Image</a></p>

CSS

PLAIN TEXT
CSS:
  1. #opacity-area, #width-area, #height-area        { background:url(horizontal.jpg) 0 8px no-repeat; height:23px; width:500px; margin:0 0 5px 0; }
  2. #opacity-slider, #width-slider, #height-slider  { background:url(button-horizontal.jpg) no-repeat; width:33px; height:23px; cursor:pointer; }

Mootools

PLAIN TEXT
JavaScript:
  1. window.addEvent('domready', function () {
  2.     /* opacity slider */
  3.     var mySlide = new Slider($('opacity-area'), $('opacity-slider'), {
  4.         steps: 100,
  5.         wheel: 1,
  6.         onChange: function(step){
  7.             $('opacity-label').set('html',step);
  8.             $('muse').set('opacity',step / 100);
  9.         }
  10.     }).set(100);
  11.    
  12.     /* height slider */
  13.     var mySlide = new Slider($('height-area'), $('height-slider'), {
  14.         steps: 300,
  15.         wheel: 1,
  16.         onChange: function(step){
  17.             $('height-label').set('html',step);
  18.             $('muse').set('height',step);
  19.         }
  20.     }).set(300);
  21.    
  22.     /* width slider */
  23.     var mySlide = new Slider($('width-area'), $('width-slider'), {
  24.         steps: 300,
  25.         wheel: 1,
  26.         onChange: function(step){
  27.             $('width-label').set('html',step);
  28.             $('muse').set('width',step);
  29.         }
  30.     }).set(300);
  31.    
  32.     /* link click */
  33.     $('save-image').addEvent('click',function() {
  34.         alert('generating...');
  35.         $('muse').set('src','sliders-ajax-save-php.php?width=' + $('width-label').getText() + '&height=' + $('height-label').getText() + '&opacity=' + $('opacity-label').getText());
  36.         $('muse').setStyles({
  37.             'border':'2px dotted #999;',
  38.             'padding':'10px'
  39.         });
  40.         $('muse').set('opacity',100);
  41.         alert('done!');
  42.     });
  43. });

PHP

PLAIN TEXT
PHP:
  1. /* do i even do anything? */
  2. if(isset($_GET['opacity']) && isset($_GET['width']) && isset($_GET['height']))
  3. {
  4.     //initial vars
  5.     $original_file = 'sliders/muse.png';
  6.     $opacity = intval($_GET['opacity']) / 100;
  7.     $width = intval($_GET['width']);
  8.     $height = intval($_GET['height']);
  9.     list($original_width,$original_height) = getimagesize($original_file);
  10.    
  11.     //create a new, virtual image
  12.     $image = imagecreatetruecolor($width, $height);
  13.     $source = imagecreatefrompng($original_file);
  14.     filter_opacity($source,$opacity);
  15.     imagecopyresized($image,$source,0,0,0,0,$width,$height,$original_width,$original_height);
  16.    
  17.     $background = imagecolorallocate($image, 0, 0, 0);
  18.     imagecolortransparent($image, $background); // make the new temp image all transparent
  19.     imagealphablending($image, false); // turn off the alpha blending to keep the alpha channel
  20.    
  21.     //output
  22.     header('Content-type: image/png');
  23.     imagepng($image);
  24.     imagedestroy($image);
  25. }
  26.  
  27.  
  28. /* from PHP.net -- http://us2.php.net/manual/en/function.imagefilter.php */
  29. function filter_opacity( &$img, $opacity ) //params: image resource id, opacity in percentage (eg. 80)
  30. {
  31.     //get image width and height
  32.     $w = imagesx( $img );
  33.     $h = imagesy( $img );
  34.  
  35.     //turn alpha blending off
  36.     imagealphablending( $img, false );
  37.  
  38.     //find the most opaque pixel in the image (the one with the smallest alpha value)
  39.     $minalpha = 127;
  40.     for( $x = 0; $x <$w; $x++ )
  41.          for( $y = 0; $y <$h; $y++ )
  42.               {
  43.                     $alpha = ( imagecolorat( $img, $x, $y )>> 24 ) & 0xFF;
  44.                     if( $alpha <$minalpha )
  45.                          { $minalpha = $alpha; }
  46.               }
  47.  
  48.     //loop through image pixels and modify alpha for each
  49.     for( $x = 0; $x <$w; $x++ )
  50.          {
  51.               for( $y = 0; $y <$h; $y++ )
  52.                     {
  53.                          //get current alpha value (represents the TANSPARENCY!)
  54.                          $colorxy = imagecolorat( $img, $x, $y );
  55.                          $alpha = ( $colorxy>> 24 ) & 0xFF;
  56.                          //calculate new alpha
  57.                          if( $minalpha !== 127 )
  58.                               { $alpha = 127 + 127 * $opacity * ( $alpha - 127 ) / ( 127 - $minalpha ); }
  59.                          else
  60.                               { $alpha += 127 * $opacity; }
  61.                          //get the color index with new alpha
  62.                          $alphacolorxy = imagecolorallocatealpha( $img, ( $colorxy>> 16 ) & 0xFF, ( $colorxy>> 8 ) & 0xFF, $colorxy & 0xFF, $alpha );
  63.                          //set pixel with the new color + opacity
  64.                          if( !imagesetpixel( $img, $x, $y, $alphacolorxy ) )
  65.                               { return false; }
  66.                     }
  67.          }
  68.     return true;
  69. }

Pueden ver un demo aqui.
Descarga el Codigo aqui.

O puedes visitar la web del autor aqui.

Nota: El codigo del autor tenia varios Bugs la version de mootols en La clase ELEMENT ya no implementa la funcion getText que usa el autor por lo cual se le tubo que agregar, a continuacion les dejo el codigo agregado:

PLAIN TEXT
JavaScript:
  1. getText: function() {
  2.         return ($pick(this.innerText, this.textContent))
  3.     }

Post to Twitter

Related posts:

  1. Accessible News Slider: Plugin para realizar sliders con jQuery
  2. Breaking: MacBook Air.
  3. TemplatesFeed – Cientos de Plantillas gratis para tus paginas web
  4. Como crear un icono en varios colores con solo una imagen CSS

About

Entry Details: This entry was posted on Miércoles, febrero 18th, 2009 at 21:35, by admin, and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Print This!

Leave a Reply

You must be logged in to post a comment.

Back to Top