带有 Mootools 和 CSS 的 Facebook 滑块——现在带有图像生成功能！

几周前，我发布了 Facebook Sliders With Mootools and CSS，它解释了如何创建控制图像高度、宽度和不透明度的 Facebook 风格的滑块：

稍微修改后，我修改了脚本以使用 PHP 保存生成的图像。

第 1 步：原始 XHTML 和 CSS

<img src="muse.jpg" id="muse" />

<div id="opacity-area">
	<div id="opacity-slider"></div>

</div>
<div>
	<strong>Opacity:</strong> <span id="opacity-label"></span>%
</div>
<br /><br />

<div id="width-area">
	<div id="width-slider"></div>
</div>
<div>
	<strong>Width:</strong> <span id="width-label"></span> pixels

</div>
<br /><br />

<div id="height-area">
	<div id="height-slider"></div>
</div>
<div>
	<strong>Height:</strong> <span id="height-label"></span> pixels
</div>
<br /><br />
<p><a href="#" id="save-image">Save Customized Image</a></p>

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

以上代码在原文中有解释

第 2 步：新 Moo

window.addEvent('domready', function () {
	/* opacity slider */
	var mySlide = new Slider($('opacity-area'), $('opacity-slider'), {
		steps: 100,
		wheel: 1,
		onChange: function(step){
			$('opacity-label').set('html',step);
			$('muse').set('opacity',step / 100);
		}
	}).set(100);
	
	/* height slider */
	var mySlide = new Slider($('height-area'), $('height-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('height-label').set('html',step);
			$('muse').set('height',step);
		}
	}).set(300);
	
	/* width slider */
	var mySlide = new Slider($('width-area'), $('width-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('width-label').set('html',step);
			$('muse').set('width',step);
		}
	}).set(300);
	
	/* link click */
	$('save-image').addEvent('click',function() {
		alert('generating...');
		$('muse').set('src','sliders-ajax-save-php.php?width=' + $('width-label').getText() + '&height=' + $('height-label').getText() + '&opacity=' + $('opacity-label').getText());
		$('muse').setStyles({
			'border':'2px dotted #999;',
			'padding':'10px'
		});
		$('muse').set('opacity',100);
		alert('done!');
	});
});

我添加了一个 AJAX 花絮，可将宽度、高度和不透明度发送到 PHP 脚本。

第 3 步：PHP

/* do i even do anything? */
if(isset($_GET['opacity']) && isset($_GET['width']) && isset($_GET['height']))
{
	//initial vars
	$original_file = 'sliders/muse.png';
	$opacity = intval($_GET['opacity']) / 100;
	$width = intval($_GET['width']);
	$height = intval($_GET['height']);
	list($original_width,$original_height) = getimagesize($original_file);
	
	//create a new, virtual image
	$image = imagecreatetruecolor($width, $height);
	$source = imagecreatefrompng($original_file);
	filter_opacity($source,$opacity);
	imagecopyresized($image,$source,0,0,0,0,$width,$height,$original_width,$original_height);
	
	$background = imagecolorallocate($image, 0, 0, 0);
	imagecolortransparent($image, $background); // make the new temp image all transparent
	imagealphablending($image, false); // turn off the alpha blending to keep the alpha channel
	
	//output
	header('Content-type: image/png');
	imagepng($image);
	imagedestroy($image);
}


/* from PHP.net -- http://us2.php.net/manual/en/function.imagefilter.php */
function filter_opacity( &$img, $opacity ) //params: image resource id, opacity in percentage (eg. 80)
{
	//get image width and height
	$w = imagesx( $img );
	$h = imagesy( $img );
  
	//turn alpha blending off
	imagealphablending( $img, false );
  
	//find the most opaque pixel in the image (the one with the smallest alpha value)
	$minalpha = 127;
	for( $x = 0; $x < $w; $x++ )
		 for( $y = 0; $y < $h; $y++ )
			  {
					$alpha = ( imagecolorat( $img, $x, $y ) >> 24 ) & 0xFF;
					if( $alpha < $minalpha )
						 { $minalpha = $alpha; }
			  }
  
	//loop through image pixels and modify alpha for each
	for( $x = 0; $x < $w; $x++ )
		 {
			  for( $y = 0; $y < $h; $y++ )
					{
						 //get current alpha value (represents the TANSPARENCY!)
						 $colorxy = imagecolorat( $img, $x, $y );
						 $alpha = ( $colorxy >> 24 ) & 0xFF;
						 //calculate new alpha
						 if( $minalpha !== 127 )
							  { $alpha = 127 + 127 * $opacity * ( $alpha - 127 ) / ( 127 - $minalpha ); }
						 else
							  { $alpha += 127 * $opacity; }
						 //get the color index with new alpha
						 $alphacolorxy = imagecolorallocatealpha( $img, ( $colorxy >> 16 ) & 0xFF, ( $colorxy >> 8 ) & 0xFF, $colorxy & 0xFF, $alpha );
						 //set pixel with the new color + opacity
						 if( !imagesetpixel( $img, $x, $y, $alphacolorxy ) )
							  { return false; }
					}
		 }
	return true;
}

如果 URL 中提供了所有必需的信息，我们将使用 PHP 的 GD 库创建一个新的“虚拟”图像。创建虚拟图像后，我们导入原始图像并修改其宽度、高度和不透明度。创建图像后，我们将其“推出”并用新图像替换页面上的原始图像。

注意事项

我想补充几点：

• 我从 PHP.net 中获取了一段代码来创建图像不透明度。
• 正如您可能看到的那样，不透明度代码的效果并不好。如果您有更好的代码建议，请告诉我。
• Christina Ricci 图片最初并不是透明的。我删除了图像的白色部分并自己使其透明。这不是精致的图像。