'Web 프로그램/이미지 다루기'에 해당되는 글 3건

728x90

php.ini 에서 extension=php_gd2.dll 가 앞에 주석처리되어 있다면 ;(주석)을 제거하고 apache 를 재시작한다.


생활코딩(https://opentutorials.org/course/62/5137) 사이트에 나온 걸 기준으로 주석을 좀 더 달았다.

<?php
header("Content-type: image/png"); // 콘텐츠의 타입을 png image 로 선언
$string = isset($_GET['text'])? $_GET['text']:'default';
$im = imagecreatefrompng("image/btn.png"); // 버튼 배경으로 사용할 이미지를 지정
$backgroundColor  = imagecolorallocate($im, 60, 87, 156); // 컬러를 지정
$px = (imagesx($im) - 7.5 * strlen($string)) / 2;
imagestring($im, 4, $px, 9, $string, $backgroundColor );
imagepng($im); // 이미지 파일 만들기
imagedestroy($im); // 정보삭제
?>


심플한 워터마크 만들기

디지털 파일에 저작자를 밝히기 위해 흐릿하게 이미지를 박아넣는 디지털 워터마크.
유료 이미지 소스 제공 사이트들에는 샘플 이미지에 모두 워터마크 처리를 한다.
샘플로 공개할 때 화질을 낮추거나 워터마크 처리를 하여 도용을 방지한다.


http://itrooms.tistory.com/304 에 나온 워터마크 코드를 용어를 좀 더 정리했다.


watermark.zip

사용법 : <img src="./watermark.php?path=image/sandal-01.png">

<?php
$ALIGN_CENTER = true;
$image_source =  $_GET['path']; // 원본 이미지 경로
$watermark_Path = './image/watermark.png'; // 워터마크 사용할 이미지
$Image_Type = strtolower(substr($image_source, strlen($image_source)-4, 4));
$watermark_Type = strtolower(substr($watermark_Path, strlen($watermark_Path)-4, 4));
if($Image_Type == '.bmp') $image = imagecreatefromwbmp($image_source);
if($Image_Type == '.gif') $image = imagecreatefromgif($image_source);
if($Image_Type == '.jpg') $image = imagecreatefromjpeg($image_source);
if($Image_Type == '.png') $image = imagecreatefrompng($image_source);
if($image) {
    if($watermark_Type == '.bmp') $watermark = imagecreatefromwbmp($watermark_Path);
    if($watermark_Type == '.gif') $watermark = imagecreatefromgif($watermark_Path);
    if($watermark_Type == '.jpg') $watermark = imagecreatefromjpeg($watermark_Path);
    if($watermark_Type == '.png') $watermark = imagecreatefrompng($watermark_Path);
    if($watermark) {
        list($imagewidth, $imageheight) = getimagesize($image_source);
        list($watermarkwidth, $watermarkheight) = getimagesize($watermark_Path);
        if($ALIGN_CENTER) { // Center
            $startwidth = (($imagewidth - $watermarkwidth)/2);
            $startheight = (($imageheight - $watermarkheight)/2);
        }
        else {
            $startwidth = ($imagewidth - $watermarkwidth);
            $startheight = ($imageheight - $watermarkheight);
        }
        imagealphablending($image, true);
        imagecopy($image, $watermark, $startwidth, $startheight, 0, 0, $watermarkwidth, $watermarkheight);
        header("Content-type: image/png");
        imagepng($image); // 이미지 파일 만들기
        imagedestroy($image);
        imagedestroy($watermark);
    }
}
// <img src="./watermark.php?path=원본이미지경로">
?>


블로그 이미지

Link2Me

,
728x90

게시판 본문에 이미지가 여러개 삽입되어 있을 때 이를 추출해서 DB에 저장하는 용도로 활용.

// 정규식을 이용해서 img 태그 전체 / src 값만 추출하기
preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $content, $matches);

// img 태그 전체 추출하기
echo '<pre>';print_r($matches[0]);echo '</pre>';

// src 값만 추출하기
echo '<pre>';print_r($matches[1]);echo '</pre>';


// 본문 내용을 텍스트만 일부 표시하려는 경우 태그 제거

$contents = strip_tags($content);


// 게시판에 저장되어 있는 이미지 태그 제거 하기
$content = preg_replace("@<img.*?>@", "", $content);


블로그 이미지

Link2Me

,
728x90

Bootstrap 메인 화면을 Layout 할 때 Carousel (이미지 회전 화면) 기능을 쉽게 제공한다.


https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h 는 하나의 파일로 Carousel 을 제공하는 예제다.

그런데 직접 파일명을 갯수만큼 적어주는 방법이다.


그래서 지정한 폴더의 파일명을 자동으로 읽어서 화면에 보여주도록 코드를 보완했다.


보완 전 코드

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="<?php echo $g['path_image']?>carousel/01.jpg" style="width:100%;">
        </div>

        <div class="item">
            <img src="<?php echo $g['path_image']?>carousel/02.jpg" style="width:100%;">
        </div>

        <div class="item">
            <img src="<?php echo $g['path_image']?>carousel/03.jpg" style="width:100%;">
        </div>

        <div class="item">
            <img src="<?php echo $g['path_image']?>carousel/04.jpg" style="width:100%;">
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
</div>


보완 후 코드

<?php
$path = $g['path_image'] . 'carousel';
$R = getFileNames($path); // 오픈하고자 하는 폴더
function getFileNames($directory) {
    $valid_formats = array("jpg", "png", "gif");// 그림 확장자 지정
    $results = array();
    $handler = opendir($directory);
    while ($file = readdir($handler)) {
        if ($file === "." || $file === "..") continue; // file명이 ".", ".." 이면 무시함
        $getExt = pathinfo($file, PATHINFO_EXTENSION); // 파일의 확장자를 구함

        if (!empty($getExt)) {
            if (in_array($getExt, $valid_formats)) {
                $results[] = $file;
            }
        }
    }
    closedir($handler);
    return $results;
}
?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <?php
        for ($i = 0; $i < count($R); $i++) {
            if ($i == 0){
                echo '<li data-target="#myCarousel" data-slide-to="$i" class="active"></li>';
            } else {
                echo '<li data-target="#myCarousel" data-slide-to="$i"></li>';
            }
        }
        ?>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <?php
        foreach($R as $key=>$value){
            if($key == 0){
                echo '<div class="item active">';
            } else {
                echo '<div class="item">';
            }
            echo '<img src="'.$g['path_image'].'carousel/'.$value.'" style="width:100%;">';
            echo '</div>';
        }
        ?>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
</div>


부트스트랩이 아닌 경우에는 bxslider 코드에 이미지 자동 읽어오기를 추가한 걸 이용하면 편하다.

http://link2me.tistory.com/1259 참조


bxslider.zip



블로그 이미지

Link2Me

,