이미지 블러 처리하기 (망할 익스때문에 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개
회원/비회원은 $is_member 로 처리할 수 있습니다~
블러 클래스를
<?php if(!$is_member) { ?>class="blurify"<?php } ?>
이렇게 해주시면 비회원은 블러가 먹힌 이미지가 보일것 같습니다만
이미지 자체를 블러시킬수는 없습니다 ㅠ
효과만 줄 뿐이라..
F12나 소스보기 등으로 원본 이미지를 볼 수 있으니
크게 의미는 없을것 같습니다..ㅎ
블러된 이미지를 생성 하는 코드가 있다면
비회원일때 이미지 자체를 바꾸는게 좋아보입니다!