회원 사진 기능 만들기 (리사이징+크롭 기능 추가) > 그누보드5 팁자료실

그누보드5 팁자료실

회원 사진 기능 만들기 (리사이징+크롭 기능 추가) 정보

회원 사진 기능 만들기 (리사이징+크롭 기능 추가)

본문

이미 fm25님이 같은 기능을 하는 소스를 올리셨는데, DB와 원본소스를 건드리지 않는 방향으로 해서 리사이징/크롭 기능도 추가해서 올립니다. 그누보드 썸네일 함수를 이용해도 되지만 그냥 만들어 버렸네요.

가로세로 제한 없이 jpg,gif,png 파일만 올리면 알아서 60*60 픽셀로 리사이징하는 소스입니다. 비율이 1:1이 아니라면 유저의 선택에 따라 어느 쪽을 자를지 선택할 수 있습니다. 자르기 싫으면 레터박스로 채울 수도 있습니다.

이 소스는 GD 라이브러리 2.0이 꼭 필요합니다.

1.
그누보드 5가 설치된 폴더에서 data/member 폴더를 찾아서, 거기에 profile_img 폴더를 추가하신 뒤 퍼미션을 707로 주세요. 회원 사진은 유저 아이디를 파일명으로 하여 여기에 저장됩니다.

2.
member 스킨의 register_form.skin.php에 다음 사항을 추가합니다. <form>~</form> 태그 사이에 적당한 곳에 끼워넣으세요. 아래 코드에는 핵심 태그만 기술했으니 자신이 사용하는 스킨에 맞게 가공하셔야 됩니다.

<input type="file" name="mb_profile_img" id="reg_mb_profile_img">
<?php
$file_check = file_exists(G5_DATA_PATH."/member/profile_img/".$member['mb_id'].".jpg");
if (!$file_check) { ?>
<div class="file-exists">
이미 프로필 이미지가 등록되어 있습니다. 새 이미지를 등록하면 이전 이미지를 덮어씁니다.<br>이전 이미지를 삭제만 하려면 아래 <strong>프로필 이미지 삭제</strong>에 체크하세요.<br>
<label class="image_del"><input type="checkbox" name="mb_profile_img_del" id="mb_profile_img_del" value="1"> 프로필 이미지 삭제</label>
</div>
<?php } ?>
<span class="help-block">프로필 이미지의 비율은 가로세로 1:1이고, 비율이 맞지 않을 경우에는 조정합니다.<br>
아래 메뉴에서 이미지를 어떻게 조정할 지 선택하세요.</span>
<label><input type="radio" name="mb_profile_img_crop" id="reg_mb_profile_img_crop1" value="1" checked>왼쪽이나 위쪽 기준으로 이미지 자름</label>
<label><input type="radio" name="mb_profile_img_crop" id="reg_mb_profile_img_crop2" value="2" checked>오른쪽이나 아래쪽 기준으로 이미지 자름</label>
<label><input type="radio" name="mb_profile_img_crop" id="reg_mb_profile_img_crop3" value="3" checked>중앙 기준으로 이미지 자름</label>
<label><input type="radio" name="mb_profile_img_crop" id="reg_mb_profile_img_crop4" value="4" checked>빈 부분에 레터박스 채워넣음</label>


3.
member 스킨의 register_form_update.tail.skin.php에 다음 사항을 추가합니다.

<?php
//----------------------------------------------------------
// 프로필 이미지 파일 업로드 시작
//----------------------------------------------------------
$mb_profile_img = '';
if (isset($_FILES['mb_profile_img']) && is_uploaded_file($_FILES['mb_profile_img']['tmp_name'])) {
	$mb_profile_img_ext = array_pop(explode(".", strtolower($_FILES['mb_profile_img']['name'])));

	if(@ereg($mb_profile_img_ext, "gif|jpg|jpeg|png")) {
        // 아이콘 용량이 1 MB 이하만 업로드 가능 (용량을 조정하고 싶으면 아래 수치 조정)
        if ($_FILES['mb_profile_img']['size'] <= (1 * 1024 * 1024)) {

            $dest_path_raw = G5_DATA_PATH."/member/profile_img/".$mb_id."_raw.".$mb_profile_img_ext;
            move_uploaded_file($_FILES['mb_profile_img']['tmp_name'], $dest_path_raw);
            $dest_path = G5_DATA_PATH."/member/profile_img/".$mb_id.".jpg";

			$size = getimagesize($dest_path_raw);
			if ($size[2] == 1 || $size[2] == 2 || $size[2] == 3) { // 이미지 파일이 진짜인지 판별
				if($size[0] < 60 || $size[1] < 60) { // 이미지 사이즈가 너무 작을 경우
					$msg .= '이미지 크기가 너무 작습니다. 가로세로 60픽셀 이상의 이미지를 올려주세요.';
				} else {
					if(file_exists($dest_path)) { // 이미 파일이 있을 경우(즉 수정일 경우) 먼저 파일을 삭제
						@unlink($dest_path);
					}

					// 이미지 불러와서 판 깔기(...)
					if($size[2] == 2) {
						$image_call = imagecreatefromjpeg($dest_path_raw);
					} elseif($size[2] == 1) {
						$image_call = imagecreatefromgif($dest_path_raw);
					} elseif($size[2] == 3) {
						$image_call = imagecreatefrompng($dest_path_raw);
					}

					// 업로드된 이미지 시작점 및 크기 설정 (크롭)
					// 기본값들
					$basic_img_w = 60;
					$basic_img_h = 60;
					$src_img_x = 0;
					$src_img_y = 0;
					$src_img_w = $size[0];
					$src_img_h = $size[1];
					$des_img_x = 0;
					$des_img_y = 0;
					$des_img_w = $basic_img_w;
					$des_img_h = $basic_img_h; 
					if($size[0] > $size[1]) { // 가로가 길 경우
						$src_img_w = $size[1];
						switch($mb_profile_img_crop) {
							case 1:
								break;
							case 2:
								$src_img_x = $size[0] - $size[1];
								break;
							case 3:
								$src_img_x = (int)(($size[0] - $size[1]) / 2);
								break;
							case 4:
								$src_img_w = $size[0];
								$des_img_h = (int)($basic_img_w * ($size[1] / $size[0]));
								$des_img_y = (int)(($basic_img_h - $des_img_h) / 2);
								break;
						}
					} elseif($size[0] < $size[1]) { // 세로가 길 경우
						$src_img_h = $size[0];
						switch($mb_profile_img_crop) {
							case 1:
								break;
							case 2:
								$src_img_y = $size[1] - $size[0];
								break;
							case 3:
								$src_img_x = (int)(($size[1] - $size[0]) / 2);
								break;
							case 4:
								$src_img_h = $size[1];
								$des_img_w = (int)($basic_img_h * ($size[0] / $size[1]));
								$des_img_x = (int)(($basic_img_w - $des_img_w) / 2);
								break;
						}
					}

					// 트루컬러 이미지 캔버스 준비
					$image_canvas = imagecreatetruecolor($basic_img_w,$basic_img_h);

					// 이미지 리사이즈
					imagecopyresampled($image_canvas, $image_call, $des_img_x, $des_img_y, $src_img_x, $src_img_y, $des_img_w, $des_img_h, $src_img_w, $src_img_h);

					// 이미지 저장
					imagejpeg($image_canvas, $dest_path, 80);

					// 메모리에서 작업내용 삭제
					imagedestroy($image_call);
					imagedestroy($image_canvas);

					// 원본 이미지 삭제
					@unlink($dest_path_raw);
				}

            } else {	// gif,jpg,png 파일이 아니면 올라간 이미지를 삭제한다.
				@unlink($dest_path_raw);
			}
        } else {
            $msg .= '프로필 이미지를 1 MB 이하로 업로드 해주십시오.';
        }

    } else {
        $msg .= $_FILES['$mb_profile_img']['name'].'은(는) 이미지 파일이 아닙니다.';
    }
} 

if($mb_profile_img_del == 1) { // 파일 삭제에 체크가 들어온 경우
	$dest_path = G5_DATA_PATH."/member/profile_img/".$mb_id.".jpg";
	@unlink($dest_path);
}
//----------------------------------------------------------
// 프로필 이미지 파일 업로드 끝
//----------------------------------------------------------




4.
이러면 업로드 과정은 다 끝났습니다. 이미지를 불러올 때는 적절한 위치에,

<?php 
$mb_profile_img_path = G5_DATA_PATH."/member/profile_img/".$member['mb_id'].".jpg";
if(file_exists($mb_profile_img_path)) {
    $mb_profile_img_url = G5_DATA_URL."/member/profile_img/".$member['mb_id'].".jpg";
} else {  // 프로필 이미지가 없으면 기본 이미지를 보여준다.
    $mb_profile_img_url = G5_IMG_URL."no_profile_image.jpg";
}
?>
<img src="<?php echo $mb_profile_img_url ?>">

라고 넣어주면 됩니다. 이미지를 등록 안한 사용자들을 위해서는 그누보드 img 폴더 안에 기본으로 보여질 이미지를 no_profile_image.jpg라는 이름으로 넣어주면 됩니다. (안그러면 이미지를 등록 안한 사용자들에게는 엑박 뜹니다)

게시판 글보기 화면이나 댓글에서 보여줄 때는 $member['mb_id'] 부분만 다음과 같이 변경해 주세요.

게시판 글보기 화면 - $view['mb_id']
게시판 댓글 리스트 화면 - $list[$i]['mb_id']
추천
5

댓글 16개

적용을 해보고 있는데

member 스킨의 register_form_update.tail.skin.php 이 부분에서
register_form_update.tail.skin.php파일이 존재하지 않네요.

한번 확인 부탁드리겠습니다.
없을 경우 그냥 파일을 만드시면 됩니다. register_form_update.php 파일의 소스를 보면 이 파일을 인클루드 하게 되어 있습니다. 주 용도는 스킨이라기보다는 회원 가입시의 기능 확장 용도로 들어 있는 거고, basic 스킨에는 기능 확장을 할 이유가 없기에 빠져 있습니다.

참고로 영카트 5의 basic 스킨에는 이 파일이 있고, SMS 관련 코드가 들어가 있습니다.
전체 6 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT