logo标签列表

如何在图片周围添加图像边框？

phphtmlimage
4

有没有简单的方法在图片周围添加一个图像边框？

原因是我想在图片周围创建一个投影效果。

这些图片作为缩略图加载，大小为110x75 px... 我考虑创建一个阴影边框，但不知道如何在图片周围添加，有人知道吗？

最好使用PHP...

7个回答
4
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);

}
4

使用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'>
4

如果只需要在网页上进行图像处理，您可以使用CSS来实现与GD库或ImageMagick类似的效果，但是如果需要对实际图像进行修改，则可以在PHP中使用GD库或ImageMagick。关于使用PHP和GD库的完整教程可以参考以下链接：

哦，当你的服务器在将数百张图片转换为带阴影的等效图像时耗尽内存，我会笑得很厉害。 - Piotr Rochala
4
我不确定你的意思是什么。按照现代标准，这不会使用大量的内存。如果这成为一个问题，除非你为每个用户生成唯一的图像，否则没有必要实时处理图像。只需生成带有阴影的图像一次，存储并引用它即可。请注意避免过早优化，我们已经不在1998年了。 - Colin Pickard
1
你需要使用CSS来创建这个效果。有几个选项可供选择。
 .img{
      border-top:none;
      border-left:none;
      border-right:solid 2px #dddddd;
      border-bottom:solid 2px #dddddd;
 }

虽然它是最简单的，但外观并不那么出色。

要创建更好的阴影效果，您可以使用jQuery插件，例如阴影插件。它可以在页面上的任何元素上创建漂亮的投影效果。

如何让jQuery起作用？我听说过很多关于它的事情...只需要在HTML中添加<script src="jquery文件路径">指向相应的库文件，还是还有其他要注意的地方吗？ - user188962
1
@camran：这是第一步中的步骤 - 你还需要告诉它要做什么。请参见http://www.google.com/search?rls=en&q=jquery + tutorial＆sourceid = opera＆ie = utf-8＆oe = utf-8 - Piskvor left the building
1

如果这仅仅是视觉上的装饰效果，你可以尝试使用CSS3的box-shadow属性。但它只在Firefox、Safari和Chrome中有效，所以它只是一种“渐进增强”技术。这个教程应该会有所帮助。

另外，你也可以使用以下CSS来实现基本效果。`gallery`是你给围绕图片的元素设置的类名（如通过`

...
`）。宽度/高度是可选的，但如果所有图片的尺寸都相同，则最好使用CSS而不是直接在图片上使用宽度/高度属性。

.gallery img {
    width: 100px;
    height: 75px;
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #ccc;
}
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);
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接