업로드한 이미지에 필터효과 주기 정보
게시판 업로드한 이미지에 필터효과 주기
관련링크
첨부파일
본문
첨부파일로 업로드한 이미지에 필터효과를 적용해보았습니다.
포토샾에서 많이 사용하는 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
댓글 전체
