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

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

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

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

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

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

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

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