Обрезка изображения в форме шестиугольника на веб-странице

Question

У меня есть изображение на веб-странице.Я хочу преобразовать четырехстороннее изображение в шестистороннее.т.е. обрезать края и преобразовать изображение в шестиугольную форму.

Как я могу сделать это, используя PHP ImageMagick / GD на моей стороне сервера.Я использую сервер XAMPP для создания примера веб-страницы.Или есть лучший способ сделать это, используя Javascript / CSS, используя атрибуты стиля img.

Answer 1

Это будет менее болезненно в CSS (вам даже не нужен JS).

см. Эту скрипку http://jsfiddle.net/kizu/bhGn4/

Answer 2

Так как мне нужно было использовать несколько размеров и кэширование, мне нужно было это в 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);

Вы должны получить что-то похожее на это:

Answer 3

Вы можете использовать холст HTML5, чтобы замаскировать края, а затем считывать изображение, используя URI данных.

Также помните, что для того, чтобы этот метод работал, вам нужно будет передать изображение в ваш доменПоскольку Canvas помечает свое содержимое как грязное, если изображение загружается из чужого домена.

ОБНОВЛЕНИЕ: Я добавил jsfiddle , демонстрирующий эту технику.