이미지 리사이징 질문입니다. > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

이미지 리사이징 질문입니다. 정보

이미지 리사이징 질문입니다.

본문

이 스킨을 한번 써봣는대요..
가로 사이즈가 500 이하의 사진을 올렸을경우...
500사이즈로 크게 보이더군요..
음. 만약 350 사이즈의 사진을 올렸을경우
크게 안변하고 350사이즈로 보일수 있을까요 ?
^^;;
저의 남은 포인트 오천점 몽땅 겁니다. ㅇㅇv
 
갤러리 view.skin.php 원본 소스 입니당.
 
<!-- 갤러리 시작 --> 
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
  <td width="100%" valign="top">
   <table border="0" cellspacing="1" cellpadding="5" bgcolor="#AAAAAA">
    <tr>
     <td valign="top" bgcolor="#FFFFFF">
      <script>
        function chgImg( imgname, dnimgname, imgdesc ) {
          var LureExp = /<br>/gi;
          document.gallery_img.src=imgname;
          //document.f.dnimg.value=dnimgname;
          document.descForm.desc.value=imgdesc.replace( LureExp, "\n" );
        }
      </script>
      <? if ($view[file][0][view])  {
              for ($i=0; $i<=10; $i++) {
                   $image[$i] = "$g4[path]/data/file/$bo_table/".$view[file][$i][file];
         }
      
       if ($view[file][0][view])  {
      ?>
       <img src="<?=$image[0]?>" name=gallery_img width="500" border=0 value=0>
      <? } else {?>
       <img src="<?=$board_skin_path?>/img/noimg.gif" border=0 value=0>
      <? } ?>
     </td>
    </tr>
   </table>
  </td>
 <tr>
  <td valign="top">
   <form NAME="descForm">
   <br>사진설명 :<input name="desc" style="BORDER:0px solid; width:455px; HEIGHT:17px; BACKGROUND-COLOR:#F8F8F9" readonly value="<?=$view[file][0][content]?>"><br><br>
  </td>
   </form>
 </tr>
 
 <tr>
  <td>
   <?//=$view[file][0][content]?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[0]."','".$image[0]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][0][content]) )."' );\"" ?>> <img src="<?=$image[0]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][1][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[1]."','".$image[1]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][1][content]) )."' );\"" ?>> <img src="<?=$image[1]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][2][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[2]."','".$image[2]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][2][content]) )."' );\"" ?>> <img src="<?=$image[2]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][3][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[3]."','".$image[3]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][3][content]) )."' );\"" ?>> <img src="<?=$image[3]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][4][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[4]."','".$image[4]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][4][content]) )."' );\"" ?>> <img src="<?=$image[4]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][5][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[5]."','".$image[5]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][5][content]) )."' );\"" ?>> <img src="<?=$image[5]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <div style="line-height:30%;"><br><? }?>
   <? if ($view[file][6][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[6]."','".$image[6]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][6][content]) )."' );\"" ?>> <img src="<?=$image[6]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][7][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[7]."','".$image[7]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][7][content]) )."' );\"" ?>> <img src="<?=$image[7]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][8][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[8]."','".$image[8]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][8][content]) )."' );\"" ?>> <img src="<?=$image[8]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][9][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[9]."','".$image[9]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][9][content]) )."' );\"" ?>> <img src="<?=$image[9]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][10][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[10]."','".$image[10]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][10][content]) )."' );\"" ?>> <img src="<?=$image[10]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][11][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[11]."','".$image[11]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][11][content]) )."' );\"" ?>> <img src="<?=$image[11]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
   <? if ($view[file][12][file]) {?>
   <a href=#1 <? echo "onClick=\"chgImg( '".$image[12]."','".$image[12]."','".ereg_replace("(\r\n|\n|\r)", "  ", strip_tags($view[file][12][content]) )."' );\"" ?>> <img src="<?=$image[12]?>" width="80" height="60" align="absmiddle" border="0"></a>
   <? }?>
     </td>
 </tr>
 <tr>
  <td valign="top">
   <?if ($view[content])  {?>
   <br><?=$view[content];?>
   <?}else{?>
   <br>
   <?}?>
  </td>
 </tr> 
</table>
<!-- 갤러리 끝 -->
  • 복사

댓글 전체

일단
<img src="<?=$image[0]?>" name=gallery_img width="500" border=0 value=0>
부분에서 가로폭을 정해 놓았네요...

이 윗부분에 팁게시판의 리사이징 팁을 적절히 적용시키셔야 할듯 합니다.
제로보드용 팁이긴 한데.....

<?

unset($temp);
$img_name = "$dir/noscreenshot.gif"; // 업로드된 이미지가 없을때 보여줄 파일...$dir 은 스킨 폴더
$img_width = 100; // 위 파일 width
$img_height = 100; // 위 파일 height

$bbs_width = 700; // width 제한 크기

if($data[file_name1]) { // 이미지가 있을때
       
        $img_name = $data[file_name1]; // 업로드된 이미지 파일명 추출

        $temp = @GetImageSize($img_name); // 화면에 표시할 그림파일 크기 정보 얻고

        if($temp[0] > $bbs_width ) { // 지정된 게시판 가로크기보다 클경우

        $ratio = $bbs_width/$temp[0]; // 게시판 width에 대한 그림파일의 width 비율 계산.
        $img_width = $temp[0]*$ratio; // 그림파일의 width와 height에 동일 ratio 적용.
        $img_height = $temp[1]*$ratio;
        }
       
        else {
                $img_width = $temp[0]; // 지정된 크기보다 작을경우 원사이즈대로 출력
                $img_height = $temp[1];
        }
}

?>
이거대신에
<? if ($view[file][0][view])  {
              for ($i=0; $i<=10; $i++) {
                  $image[$i] = "$g4[path]/data/file/$bo_table/".$view[file][$i][file];
        }
     
      if ($view[file][0][view])  {
      ?>
      <img src="<?=$image[0]?>" name=gallery_img width="500" border=0 value=0>
      <? } else {?>
      <img src="<?=$board_skin_path?>/img/noimg.gif" border=0 value=0>
      <? } ?>
아랫것 넣으면 안되나요?

<?
        // 파일 출력
        for ($i=0; $i<=count($view[file]); $i++) {
            if ($view[file][$i][view])
                echo $view[file][$i][view] . "<p>";
        }
        ?>
참조 : http://www.sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=2588

그리고 팁게시판에서 이미지로 검색하면 많은 자료가 나옵니다. 참조하세요...
저도 필요한 부분이어서 좀더 근본적인 해결방법을 찾아보고 있던차에 질문을 보고 마저 삽질을 해봅니다.

썸네일 클릭시 타겟 이미지에 올릴 파일을 규격화 해서 깔끔하게 보이도록 하는 방법을 생각해볼수 있을것입니다.
추가로 말씀하신 것처럼 설정된 규격보다 작은 파일은 원본 사이즈 그대로 보여주면 될듯합니다.

썸네일 배열과 관련해서 하드코딩 없이 썸네일 배열을 가능하게 만든스킨은 제가 최근에 올려놓았습니다.
http://www.sir.co.kr/bbs/tb.php/g4_skin/33391
규격보다 작은 파일을 처리하는 부분은 빠져있습니다.
아래 규격파일 생성 방법과 위 스킨의 뷰페이지를 참고하시면 쉽게 수정가능할겁니다.

//-----------------------------------
테스트를 마친 write_update.skin.php 전체코드입니다.

위에서 말씀드린 일정한 규격파일을 생성하는 루틴입니다.
물론 규격설정보다 작은 사이즈의 파일은 원본사이즈 그대로 둡니다.
두 종류의 워터마크 관련 테스트 코드가 그대로 있으므로 참고하시고 필요없다면 삭제하시면 될듯 합니다.

규격파일 생성 폴더 - data/bo_table/rs_file
규격파일 사이즈 - $board['bo_image_width']
 - 가로나 세로 가운데 큰쪽을 기준으로 비율에 맞춰 규격화 합니다.
워터마크(테스트)
 - 원본 업로드할때 이미지 워터마크 표시합니다.
 - 규격파일 생성할때 문자 워터마크 표시합니다.(한글처리가 안되는 버그가 있군요)

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

//워터마크 테트스 1 - 이미지 형식
//http://www.sir.co.kr/bbs/tb.php/g4_skin/28315 푸름빠덜님
function waterMark($fileInHD, $wmFile, $transparency = 100, $jpegQuality = 100, $margin = 5) {
    $wmImg  = imageCreateFromGIF($wmFile);
    $jpegImg = imageCreateFromJPEG($fileInHD);
    $wmX=imageSX($jpegImg) - imageSX($wmImg);
    $wmY=imageSY($jpegImg) - imageSY($wmImg);
    //$background_color = imagecolorallocate($jpegImg, 255,255,255);
    imageCopyMerge($jpegImg, $wmImg, $wmX, $wmY, 0, 0, imageSX($wmImg), imageSY($wmImg), $transparency);
    ImageJPEG($jpegImg, $fileInHD, $jpegQuality);
}
//워터마크 1 펑션 끝

//특정 폴더에 규격설정 이미지 생성 테스트
$data_path = $g4['path'] . "/data/file/" . $bo_table;
$rs_path = $data_path . "/rs_file";

if (!is_dir($rs_path)) {
    @mkdir($rs_path, 0707);
    @chmod($rs_path, 0707);
}

$sql=" select * from " . $g4['board_file_table'] . " where  bo_table = '" . $bo_table . "' and wr_id = '" . $wr_id . "' order by bf_no asc";
$results = sql_query($sql);
for ($i=0; $row=sql_fetch_array($results); $i++) {

    $file = $row['bf_file'];

    $dest_file = $data_path ."/". $file;

    if (preg_match("/\.(jp[e]?g|gif|png)$/i", $file) && file_exists($dest_file)) {

        //원본 이미지에 워터마크 1-1 표시
        //--------------
        if ($_FILES['bf_file']['name'][$i]){
            waterMark($dest_file,$board_skin_path."/img/watermark.gif");//이미지 타잎
        }
        //-------------- 끝

        //--------------------------------------- $board['bo_image_width']에 따른 규격파일 생성

        $rs_file = $rs_path . "/" . $file;

        $size = getimagesize($dest_file);
        if ($size[2] == 1)
            $src = imagecreatefromgif($dest_file);
        else if ($size[2] == 2)
            $src = imagecreatefromjpeg($dest_file);
        else if ($size[2] == 3)
            $src = imagecreatefrompng($dest_file);
        else
        break;

        //워터마크 테스트 2 http://www.sir.co.kr/bbs/tb.php/g3_tiptech/126 마스터케빈님
        //규격파일 생성시 문자형태 워터마크 표시
        $string_b = $_SERVER["HTTP_HOST"];  //abc.co.kr을 취함
        $string_c=$member['mb_id']; //아이디
        $string_a=$member['mb_nick']; //닉네임

        $x1=($size[0]-151); // 좌측 x좌표
        $y1=($size[1]-27); // 촤측 y좌표
        $x2=($size[0]-10); // 우측 x좌표
        $y2=($size[1]-10); // 우측 y좌표
        $gray=ImageColorAllocate($src,170,170,170); // 회색색깔을 구한다. 이작업시 #ffffff 와 같은 방식은 쓸수 없다.
        $white=ImageColorAllocate($src,255,255,255); // 하얀색을 구한다.
        $black=ImageColorAllocate($src,0,0,0); // 검정색을 구한다.
        $blue=ImageColorAllocate($src,83,111,183); // 푸른색을 구한다.
        ImageString($src,2,$x1+7,$y1+1,$string_a,$white); // 우측하단에 글자 넣기
        ImageString($src,2,$x1+8,$y1+2,$string_a,$black); // 우측하단 글자 음영
        ImageString($src,6,11,11,$string_b,$black); // 촤측 상단 글자 넣기
        ImageString($src,6,10,10,$string_b,$blue); // 좌측 상단 글자 음영

        ImageString($src,5,11,26,$string_c,$black);
        ImageString($src,5,10,25,$string_c,$gray);
        //------------ 끝

        if ($size[0] >= $size[1]) :
            //최대 사이즈 제한 방식
            $rate = $board['bo_image_width'] / $size[0];
            $width = $board['bo_image_width'];
            $height = (int)($size[1] * $rate);
        else :
            $rate = $board['bo_image_width'] / $size[1];
            $width = (int)($size[0] * $rate);
            $height = $board['bo_image_width'];
        endif;
        //규격 설정보다 작은 파일 처리
        if (($size[0] < $board['bo_image_width']) and ($size[1] < $board['bo_image_width'])) :
            $width = $size[0];
            $height = $size[1];
        endif;
        //규격에 맞지않다면 삭제
        if (($width != $board['bo_image_width']) or ($height != $board['bo_image_width'])) :
            @unlink($rs_file);
        endif;

        if (!file_exists($rs_file)) :
        $dst = imagecreatetruecolor($width, $height);
            imagecopyresampled($dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
            //imagepng($dst, $rs_file, $board['bo_2']);
            imagejpeg($dst, $rs_file, $board['bo_2']);
            chmod($rs_file, 0707);
        endif;
    }
}
?>
<script>
  function chgImg( imgname, dnimgname, imgdesc ) {
    var LureExp = /<br>/gi;
    document.gallery_img.src=imgname;
    //document.f.dnimg.value=dnimgname;
    document.descForm.desc.value=imgdesc.replace( LureExp, "\n" );
  }
</script>
<? if ($view[file][0][view])  {
        for ($i=0; $i<=10; $i++) {
            $image[$i] = "$g4[path]/data/file/$bo_table/".$view[file][$i][file];
}

if ($view[file][0][view])  {
?>
<img src="<?=$image[0]?>" name=gallery_img onload='if(this.width>넓이값){this.width=넓이값}' border=0 value=0>
<? } else {?>
<img src="<?=$board_skin_path?>/img/noimg.gif" border=0 value=0 onload='if(this.width>넓이값){this.width=넓이값}'>
<? } ?>
© SIRSOFT
현재 페이지 제일 처음으로