업로드한 이미지에 필터효과 주기 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

업로드한 이미지에 필터효과 주기 정보

게시판 업로드한 이미지에 필터효과 주기

첨부파일

image_filter.zip (68.2K) 11회 다운로드 2023-01-14 18:20:55 포인트 차감10
테스트한 버전5.5.4
호환 가능 버전5.3이상 가능할 것 같습니다

본문

첨부파일로 업로드한 이미지에 필터효과를 적용해보았습니다.

포토샾에서 많이 사용하는 hue/saturate, grayscale, invert등의 효과를 라디오 버튼으로 선택하면 이미지에 필터가 적용됩니다.

https://sir.kr/g5_tip/18179?sfl=wr_name%2C1&stx=%EB%B9%84%ED%83%80%EC%A3%BC%EB%A6%AC&page=2 과 https://www.w3schools.com/cssref/css3_pr_filter.php 이 소스를 사용했습니다.

감사의 말씀을 드립니다.

압축을 풀면 img_filter_pc, img_filter_mobile 두개의 폴더가 나옵니다.

그누보드 순정기준으로 

img_filter_pc는 skin/board/img_filter_pc 의 경로가 되게 업로드합니다.

img_filter_mobile는 mobile/skin/board/img_filter_mobile의 경로가 되도록 업로드합니다.

그리고 일반적인 게시판을 적용하는 방법으로 적용하면 됩니다.

 

첨부파일을 출력하는 div 아이디에 css로 필터효과를 주었습니다.

<!-- Image Filter Insert -->
<style>
#bo_v_img { filter:<?php echo $view['wr_1'] ?>;}
</style>
<!-- Image Filter Insert -->
        <?php
        // 파일 출력
        $v_img_count = count($view['file']);
        if($v_img_count) {
            echo "<div id=\"bo_v_img\">\n";
            foreach($view['file'] as $view_file) {
                echo get_file_thumbnail($view_file);
            }
            echo "</div>\n";
        }
         ?>

 

글쓰기에서 none(필터없음)이 defalt로 되어있습니다. 원하는 효과를 라디오버튼으로 선택하시면됩니다.

필터효과를 더 세분화하거나 필터를 추가하려고 하는경에는 아래에서 콤마를 사용해서 추가하시면 됩니다. 마지막에는 콤마를 넣지 않습니다.

리스트에 표시되는 썸네일주소를 입력하지 않으면 리스트썸네일이 나타나지 않습니다. 리스트썸네일은 필요에 따라 사용하시면됩니다.

<!-- Image Fllter Radio Button Insert -->
<style>
.wr-select { width:50%; height:40px; text-align-last:center; text-align:center; border:1px solid #cccccc; border-radius:3px; }
</style>
<?php
function wr_select($select_wr, $select_str, $select_req) {
    global $write;
    return "
        <script>
        n = ".explode('_', $select_wr)[1].";
        document.write('<select id=wr_' + n + ' name=wr_' + n + ' class=wr-select onmouseover=n=' + n + '>');
        this['select_' + n] = ('".$select_str."').split(',');
        for (this['option_' + n] of this['select_' + n]) document.write('<option>' + this['option_' + n] + '</option>');
        document.write('<option style=display:none value=\'\'>선택하세요</option>');
        document.write('</select>');
        this['selectReq_' + n] = ".$select_req.";
        this['selectString' + n] = '".$write[$select_wr]."';
        if (this['selectReq_' + n]) {
            if (this['selectString' + n] == '') this['wr_' + n].value = this['wr_' + n].getElementsByTagName('option')[0].value;
            else this['wr_' + n].value = this['selectString' + n];
            with (this['wr_' + n].style) {
                backgroundImage = 'url(../img/require.png)';
                backgroundRepeat = 'no-repeat';
                backgroundPosition = 'right top';
            }
        }
        else this['wr_' + n].value = this['selectString' + n];
        </script>
    ";
}
?>
<!-- Image Fllter Radio Button Insert -->
<br>
<br>
<div class="bo_w_info write_div">      
<!-- Imgage Filter Radio button Insert -->
<?php echo wr_select("wr_1", "none,blur(2px),blur(5px),blur(10px),blur(30px),brightness(200%),contrast(200%),drop-shadow(8px 8px 10px gray),grayscale(50%),grayscale(100%),hue-rotate(90deg),invert(100%),opacity(25%),opacity(50%),opacity(75%),opacity(100%),saturate(8),sepia(50%),sepia(100%),contrast(200%) brightness(150%)", 1); ?> 
<!-- Imgage Filter Radio button Insert -->
<!-- List Thumbnail Address Insert -->
<label for="wr_10" class="sound_only">리스트썸네일주소</label>
<input type="text" name="wr_10" value="<?php echo $write['wr_10'] ?>" id="wr_10"  class="frm_input full_input " placeholder="리스트썸네일 주소 <예>https://example/image/pic.png"> 
<!-- List Thumbnail Address Insert -->
</div>

감사합니다.

 

 

추천
10

댓글 전체

전체 2,247 |RSS
그누보드5 스킨 내용 검색

회원로그인

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