在网页中将图像裁剪为六边形

Question

我在网页上有一张图片。我想将四面图像转换为六面图像。即裁剪边缘并将图像转换为六边形。

如何在服务器端使用PHP ImageMagick / GD进行操作。我正在使用XAMPP服务器来构建示例网页。或者通过使用img样式属性，使用Javascript / CSS有更好的方法。

Answer 1

CSS中的痛苦会少一些（你甚至不需要JS）。

请参阅此小提琴http://jsfiddle.net/kizu/bhGn4/

Answer 2

您可以使用HTML5画布屏蔽边缘，然后使用数据URI读取图像。

另请注意，要使此技术起作用，您必须将图像代理到您的域，因为如果从外部域加载图像，Canvas会将其内容标记为脏。

更新：我添加了一个演示此技术的jsfiddle。

Answer 3

由于我需要使用多种大小和缓存，我需要它在php（好吧，服务器端:) :)：

// doge.jpg is a squared pic
$raw = imagecreatefromjpeg('doge.jpg'); 

/* Simple math here

  A_____F
  /     \
B/       \E
 \       /
 C\_____/D

*/
$w = imagesx($raw); 
$points = array(
    .25 * $w, .067  * $w, // A 
    0, .5   * $w, // B
    .25 * $w, .933  * $w, // C
    .75 * $w, .933  * $w, // D
    $w, .5  * $w, // E
    .75 * $w, .067  * $w  // F
);

// Create the mask
$mask = imagecreatetruecolor($w, $w);
imagefilledpolygon($mask, $points, 6, imagecolorallocate($mask, 255, 0, 0));

// Create the new image with a transparent bg
$image = imagecreatetruecolor($w, $w);
$transparent = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagealphablending($image, false);
imagesavealpha($image, true);
imagefill($image, 0, 0, $transparent);

// Iterate over the mask's pixels, only copy them when its red.
// Note that you could have semi-transparent colors by simply using the mask's 
// red channel as the original color's alpha.
for($x = 0; $x < $w; $x++) {
    for ($y=0; $y < $w; $y++) { 
        $m = imagecolorsforindex($mask, imagecolorat($mask, $x, $y));
        if($m['red']) {
            $color = imagecolorsforindex($raw, imagecolorat($raw, $x, $y));
            imagesetpixel($image, $x, $y, imagecolorallocatealpha($image,
                              $color['red'], $color['green'], 
                              $color['blue'], $color['alpha']));
        }
    }
}

// Display the result
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);

你应该得到类似的东西：