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

我在网页上有一个图像。我想把四边形的图像转换成六边形的图像。i、 e.裁剪边缘并将图像转换为六边形

---

如何在服务器端使用PHP ImageMagick/GD实现这一点。我正在使用XAMPP服务器构建一个示例网页。或者有没有更好的方法使用Javascript/CSS，通过使用img样式属性来实现这一点。

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

还要注意的是，为了使这项技术发挥作用，您必须将图像代理到您的域，因为如果图像是从外部域加载的，Canvas会将其内容标记为脏的

---

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

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

还要注意的是，为了使这项技术发挥作用，您必须将图像代理到您的域，因为如果图像是从外部域加载的，Canvas会将其内容标记为脏的

---

更新：我添加了一个演示这项技术的工具。

在CSS中，这将减少痛苦（你甚至不需要JS）

---

看看这把小提琴

它在CSS中的痛苦会小一些（你甚至不需要JS）

---

看到这把小提琴了吗

因为我需要使用多种大小和缓存，所以我需要用php（服务器端：）：

//doge.jpg是一个平方图
$raw=imagecreatefromjpeg（'doge.jpg'）；
/*这里有简单的数学
A F
/     \
B/\E
\       /
C\\\\\\\\\\\\\/D
*/
$w=图像X（$raw）；
$points=数组(
.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
);
//创建遮罩
$mask=ImageCreateTureColor（$w，$w）；
ImageFilled多边形（$mask，$points，6，imagecolorallocate（$mask，255，0，0））；
//使用透明背景创建新图像
$image=imageCreateTureColor（$w，$w）；
$transparent=imagecolorallocatealpha（$image，0,0,0127）；
imagealphablending（$image，false）；
imagesavealpha（$image，true）；
imagefill（$image，0,0，$transparent）；
//迭代遮罩的像素，仅在其为红色时复制它们。
//请注意，只需使用遮罩的
//红色通道作为原始颜色的alpha。
对于（$x=0；$x<$w；$x++）{
对于（$y=0；$y<$w；$y++）{
$m=imagecolorsforindex（$mask，imagecolorat（$mask，$x，$y））；
如果（$m['red']））{
$color=imagecolorsforindex（$raw，imagecolorat（$raw，$x，$y））；
imagesetpixel（$image，$x，$y，imagecolorallocatealpha（$image，
$color['red']，$color['green']，
$color['blue']，$color['alpha']）；
}
}
}
//显示结果
标题（'Content-type:image/png'）；
imagepng（$image）；
图像销毁（$图像）；

你应该得到类似的东西：

---

因为我需要使用多种大小和缓存，所以我需要在php中使用它（服务器端：）：

//doge.jpg是一个平方图
$raw=imagecreatefromjpeg（'doge.jpg'）；
/*这里有简单的数学
A F
/     \
B/\E
\       /
C\\\\\\\\\\\\\/D
*/
$w=图像X（$raw）；
$points=数组(
.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
);
//创建遮罩
$mask=ImageCreateTureColor（$w，$w）；
ImageFilled多边形（$mask，$points，6，imagecolorallocate（$mask，255，0，0））；
//使用透明背景创建新图像
$image=imageCreateTureColor（$w，$w）；
$transparent=imagecolorallocatealpha（$image，0,0,0127）；
imagealphablending（$image，false）；
imagesavealpha（$image，true）；
imagefill（$image，0,0，$transparent）；
//迭代遮罩的像素，仅在其为红色时复制它们。
//请注意，只需使用遮罩的
//红色通道作为原始颜色的alpha。
对于（$x=0；$x<$w；$x++）{
对于（$y=0；$y<$w；$y++）{
$m=imagecolorsforindex（$mask，imagecolorat（$mask，$x，$y））；
如果（$m['red']））{
$color=imagecolorsforindex（$raw，imagecolorat（$raw，$x，$y））；
imagesetpixel（$image，$x，$y，imagecolorallocatealpha（$image，
$color['red']，$color['green']，
$color['blue']，$color['alpha']）；
}
}
}
//显示结果
标题（'Content-type:image/png'）；
imagepng（$image）；
图像销毁（$图像）；

你应该得到类似的东西：

---

您可以在服务器端使用什么，ImageMagick？GD？你大概知道你不能有一个实际上是六面的图像？除非是矢量图形，否则浏览器将需要一个插件来显示，而PHP将不是创建的语言……您可以在服务器端使用什么，ImageMagick？GD？你大概知道你不能有一个实际上是六面的图像？除非是矢量图形，否则浏览器将需要一个插件来显示，PHP将不是创建的语言……现在这是一些整洁的CSS，值得一个大+1。我猜你把它藏在什么地方了？如果你写得那么快，我会印象深刻…是的，我从来没有说过这是我的。我从去年9月起就把它书签了；）现在，这是一些整洁的CSS，值得一个大+1。我猜你把它藏在什么地方了？如果你写得那么快，我会印象深刻…是的，我从来没有说过这是我的。我从去年9月起就把它书签了；）@克洛夫·德拉库拉：我在密室里找不到任何东西。我遗漏了什么吗？忘了点击“更新”，现在已经修复了。@Krof Drakula:我在JSFIDLE中找不到任何东西。我遗漏了什么吗？忘了点击“更新”，现在已经修复了。你知道如何在拉威尔做到这一点吗？我们还可以把六边形旋转90度吗？你知道如何在拉威尔做到这一点吗？我们也可以

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