이미지 블러 처리하기 (망할 익스때문에 JS)
이미지 블러 효과.. css로 처리하면 참 쉽죠..
filter: blur(10px);
-webkit-filter: blur(10px);
이런식으로 필터만 주면되는데 문제는 이 망할 익스플로러..
국내에선 아직도 익스 11 사용자가 많으므로 크로스브라우징에 애를 먹네요..
익스 9 이상부터 11 까지는 filter: blur가 먹질 않아서
온갖 삽질끝에 익스도 적용했네요.. ㅠ
혹시나 필요하실까봐,, 고생하지마시라고 공유합니다.
첨부된 JS파일을 편한곳에 업로드하고 호출합니다.
[code]
<script src="/경로/blurify.js"></script>
[/code]
블러가 적용될 이미지에 class="blurify" 를 주고 src 대신 data-src 로 바꿔줍니다.
[code]
<img data-src="ex.png" class="blurify">
[/code]
스크립트를 추가합니다.
[code]
<script>
(function () {
blurify({
images: document.querySelectorAll('.blurify'),
blur: 5, // 높을수록 블러가 강하게 들어갑니다.
mode: 'auto',
});
})();
</script>
[/code]
참 쉽죠?
댓글 12개
5년 전
감사합니다. ^^
5년 전
^^
5년 전
공유 감사합니다 : )
5년 전
감사합니다!
5년 전
익스 금지!!!! 마소에서 퇴출 되지 않나여?
5년 전
네 제발좀 빨리 사라졌으면 합니다 ㅎㅎ
5년 전
감사 합니다.
5년 전
감사합니다~
5년 전
감사합니다
5년 전
감사합니다!
허걱김선생
2년 전
이미지 게시판에서 비회원에게만 목록에서 블러 처리를 하고 싶은데 어떻게 해야 하나요?
2년 전
@허걱김선생
회원/비회원은 $is_member 로 처리할 수 있습니다~
블러 클래스를
<?php if(!$is_member) { ?>class="blurify"<?php } ?>
이렇게 해주시면 비회원은 블러가 먹힌 이미지가 보일것 같습니다만
이미지 자체를 블러시킬수는 없습니다 ㅠ
효과만 줄 뿐이라..
F12나 소스보기 등으로 원본 이미지를 볼 수 있으니
크게 의미는 없을것 같습니다..ㅎ
블러된 이미지를 생성 하는 코드가 있다면
비회원일때 이미지 자체를 바꾸는게 좋아보입니다!
회원/비회원은 $is_member 로 처리할 수 있습니다~
블러 클래스를
<?php if(!$is_member) { ?>class="blurify"<?php } ?>
이렇게 해주시면 비회원은 블러가 먹힌 이미지가 보일것 같습니다만
이미지 자체를 블러시킬수는 없습니다 ㅠ
효과만 줄 뿐이라..
F12나 소스보기 등으로 원본 이미지를 볼 수 있으니
크게 의미는 없을것 같습니다..ㅎ
블러된 이미지를 생성 하는 코드가 있다면
비회원일때 이미지 자체를 바꾸는게 좋아보입니다!
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4427 | ||
| 24 | 12년 전 | 7371 | ||
| 23 | 12년 전 | 5225 | ||
| 22 |
JMoon
|
12년 전 | 6247 | |
| 21 |
오늘도망했다
|
12년 전 | 13482 | |
| 20 | 12년 전 | 4322 | ||
| 19 | 12년 전 | 8047 | ||
| 18 | 12년 전 | 6513 | ||
| 17 | 12년 전 | 5414 | ||
| 16 | 12년 전 | 6132 | ||
| 15 | 12년 전 | 5614 | ||
| 14 | 12년 전 | 9230 | ||
| 13 | 12년 전 | 8200 | ||
| 12 | 12년 전 | 4951 | ||
| 11 | 12년 전 | 7268 | ||
| 10 |
 vitamin |
12년 전 | 8958 | |
| 9 | 12년 전 | 7553 | ||
| 8 | 12년 전 | 8128 | ||
| 7 | 12년 전 | 7327 | ||
| 6 | 12년 전 | 7457 | ||
| 5 | 12년 전 | 7375 | ||
| 4 | 12년 전 | 7464 | ||
| 3 | 12년 전 | 6960 | ||
| 2 | 12년 전 | 5805 | ||
| 1 | 12년 전 | 12129 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기