이미지 블러 처리하기 (망할 익스때문에 JS) 정보
이미지 블러 처리하기 (망할 익스때문에 JS)
첨부파일
본문
이미지 블러 효과.. css로 처리하면 참 쉽죠..
filter: blur(10px);
-webkit-filter: blur(10px);
이런식으로 필터만 주면되는데 문제는 이 망할 익스플로러..
국내에선 아직도 익스 11 사용자가 많으므로 크로스브라우징에 애를 먹네요..
익스 9 이상부터 11 까지는 filter: blur가 먹질 않아서
온갖 삽질끝에 익스도 적용했네요.. ㅠ
혹시나 필요하실까봐,, 고생하지마시라고 공유합니다.
첨부된 JS파일을 편한곳에 업로드하고 호출합니다.
<script src="/경로/blurify.js"></script>
블러가 적용될 이미지에 class="blurify" 를 주고 src 대신 data-src 로 바꿔줍니다.
<img data-src="ex.png" class="blurify">
스크립트를 추가합니다.
<script>
(function () {
blurify({
images: document.querySelectorAll('.blurify'),
blur: 5, // 높을수록 블러가 강하게 들어갑니다.
mode: 'auto',
});
})();
</script>
참 쉽죠?
추천
7
7
댓글 12개
감사합니다. ^^
^^
공유 감사합니다 : )
감사합니다!
익스 금지!!!! 마소에서 퇴출 되지 않나여?
네 제발좀 빨리 사라졌으면 합니다 ㅎㅎ
감사 합니다.
감사합니다~
감사합니다
감사합니다!
이미지 게시판에서 비회원에게만 목록에서 블러 처리를 하고 싶은데 어떻게 해야 하나요?
@허걱김선생
회원/비회원은 $is_member 로 처리할 수 있습니다~
블러 클래스를
<?php if(!$is_member) { ?>class="blurify"<?php } ?>
이렇게 해주시면 비회원은 블러가 먹힌 이미지가 보일것 같습니다만
이미지 자체를 블러시킬수는 없습니다 ㅠ
효과만 줄 뿐이라..
F12나 소스보기 등으로 원본 이미지를 볼 수 있으니
크게 의미는 없을것 같습니다..ㅎ
블러된 이미지를 생성 하는 코드가 있다면
비회원일때 이미지 자체를 바꾸는게 좋아보입니다!
회원/비회원은 $is_member 로 처리할 수 있습니다~
블러 클래스를
<?php if(!$is_member) { ?>class="blurify"<?php } ?>
이렇게 해주시면 비회원은 블러가 먹힌 이미지가 보일것 같습니다만
이미지 자체를 블러시킬수는 없습니다 ㅠ
효과만 줄 뿐이라..
F12나 소스보기 등으로 원본 이미지를 볼 수 있으니
크게 의미는 없을것 같습니다..ㅎ
블러된 이미지를 생성 하는 코드가 있다면
비회원일때 이미지 자체를 바꾸는게 좋아보입니다!