如何在图像周围添加图像边框?

时间:2009-10-19 15:57:31

标签: php html image

有没有简单的方法在图像周围添加图像边框?

原因是我想在图像周围创建阴影效果。

图像以缩略图形式加载,并且是110x75像素...我正在考虑创建阴影边框,但不知道如何将其添加到图像周围,有人知道吗?

PHP最好......

7 个答案:

答案 0 :(得分:4)

您可以使用GD库或ImageMagick来改变PHP中的实际图像,但如果仅在网页上需要,您也可以在CSS中实现类似的效果。

这里有一个关于PHP和GD的完整教程:

答案 1 :(得分:3)

function addBorderpng($add){
    $border=5; 
    $im=imagecreatefrompng($add);
    $width=imagesx($im);
    $height=imagesy($im);       
    $img_adj_width=$width+(2*$border);
    $img_adj_height=$height+(2*$border);
    $newimage=imagecreatetruecolor($img_adj_width,$img_adj_height);     

    $border_color = imagecolorallocate($newimage, 255, 255, 255);
    imagefilledrectangle($newimage,0,0,$img_adj_width, $img_adj_height,$border_color);

    imagecopyresized($newimage,$im,$border,$border,0,0,
    $width,$height,$width,$height); 
    imagepng($newimage,$add,9);  
    chmod("$add",0666);

}

答案 2 :(得分:1)

您需要使用CSS来创建此效果。有几种选择。

 .img{
      border-top:none;
      border-left:none;
      border-right:solid 2px #dddddd;
      border-bottom:solid 2px #dddddd;
 }

是最简单的,但看起来并不那么好。

为了制作更好的阴影,您可以使用jQuery插件,例如阴影插件。它会在页面上的任何元素上创建漂亮的阴影效果。

答案 3 :(得分:1)

如果只是视觉效果,你可以试试CSS3 box-shadow属性。它只适用于Firefox,Safari和Chrome,所以它只是一个“渐进增强”。 This tutorial应该有所帮助。

或者,您可以使用此CSS作为基本效果。 gallery是您为图像周围的元素提供的任何类名(即通过<div class="gallery">...</div>)。宽度/高度是可选的,但如果图像大小相同,那么最好使用CSS而不是图像本身的宽度/高度属性。

.gallery img {
    width: 100px;
    height: 75px;
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #ccc;
}

答案 4 :(得分:1)

更好的解决方案:

function addBorderpng($add,$bdr=1,$color='#000000'){
    $arr = explode('.', $add);
    $extension = strtolower(end($arr));
    $border=$bdr;
    if($extension == 'jpg'){
        $im=imagecreatefromjpeg($add);
    }
    else if($extension =='png'){
        $im=imagecreatefrompng($add);
    }
    $width=imagesx($im);
    $height=imagesy($im);
    $img_adj_width=$width+(2*$border); 
    $img_adj_height=$height+(2*$border);
    $newimage=imagecreatetruecolor($img_adj_width,$img_adj_height);

    $color_gb_temp =HexToRGB($color);
    $border_color = imagecolorallocate($newimage, $color_gb_temp['r'], $color_gb_temp['g'], $color_gb_temp['b']);
    imagefilledrectangle($newimage,0,0,$img_adj_width,$img_adj_height,$border_color);

    imagecopyresized($newimage,$im,$border,$border,0,0,$width,$height,$width,$height); 
    header('Content-type: image/jpeg');
    if($extension == 'jpg')
        imagejpeg($newimage,$add,9);
    else if($extension == 'png')
        imagepng($newimage,$add,9);
     //imagepng($newimage);
    //chmod("$add",0666);

}
 function HexToRGB($hex){
        $hex = ereg_replace("#", "", $hex);
        $color = array();

        if(strlen($hex) == 3) {
        $color['r'] = hexdec(substr($hex, 0, 1) . $r);
        $color['g'] = hexdec(substr($hex, 1, 1) . $g);
        $color['b'] = hexdec(substr($hex, 2, 1) . $b);
        }
        else if(strlen($hex) == 6) {
        $color['r'] = hexdec(substr($hex, 0, 2));
        $color['g'] = hexdec(substr($hex, 2, 2));
        $color['b'] = hexdec(substr($hex, 4, 2));
        }
        return $color;
 }
addBorderpng('shahid.png',5);

答案 5 :(得分:1)

通过php GD在图像周围添加边框

<?php

$img_src = '3.jpg';

$img = imagecreatefromjpeg($img_src);
$color = imagecolorallocate($img, 132, 15, 153);
$borderThickness = 10;

drawBorder($img, $color, $borderThickness);


    function drawBorder(&$img, &$color, $thickness)
    {
        $x1 = 0;
        $y1 = 0;
        $x2 = imagesx($img) - 1;
        $y2 = imagesy($img) - 1;

        for($i = 0; $i < $thickness; $i++)
        {

            imagerectangle($img, $x1++, $y1++, $x2--, $y2--, $color);
        }

    }

header('Content-type: image/jpeg');
imagejpeg($img);
?>

使用CSS为图像添加边框

.border
{
    width: 100px;
    height: 75px;
    border : 3px solid rgb(132, 15, 153);
}
<img src='3.jpg' class='border'>

答案 6 :(得分:0)

如果您想使用PHP,请尝试PHP GD库:http://php.net/manual/en/book.image.php

使用CSS将是一个更容易的选择,使用border属性。