ウェブページでヘキサゴン形状に画像を切り出す

Question

私はウェブページに画像を持っています。私は4面の画像を6面の画像に変換したい。すなわち、エッジを切り取り、画像を六角形に変換する。

サーバー側でPHP ImageMagick/GDを使用するにはどうすればよいですか。私はサンプルWebページを構築するためにXAMPPサーバーを使用しています。または、imgスタイルの属性を使用してJavascript/CSSを使用して行うより良い方法があります。

Answer 1

これは、CSSではそれほど苦痛ではありません（この場合はJSも必要ありません）。

私はPHP（まあ、サーバー側:)）でそれを必要と複数のサイズとキャッシュを使用するために必要なので、このフィドルhttp://jsfiddle.net/kizu/bhGn4/

Answer 2

HTML5キャンバスを使用してエッジをマスクし、データURIを使用してイメージを読み取ることができます。

このテクニックを使用するには、イメージがドメインにプロキシされている必要があります。キャンバスは、イメージが外部ドメインから読み込まれた場合、内容が汚れているとマークするためです。

更新：このテクニックを示すjsfiddleを追加しました。

Answer 3

を参照してください。

// 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); 

あなたはこれに似た何かを得る必要があります：