html2canvas 플러그인 관련

조회수 703회
$(function(){

                var captureBox = document.getElementById('img-capture-contents');

                // 흑백버전
                $('#grayBtn').click(function(){
                    $(captureBox).toggleClass('grayScale-ver');
                });

                $("#btn-capture").on('click', function (e) {
                    var today = new Date();
                    today = getFormatDate(today);

                    html2canvas(captureBox).then(function (canvas) {

                        if (navigator.msSaveBlob) {
                            var blob = canvas.msToBlob();
                            return navigator.msSaveBlob(blob, today+'.jpg');
                        } else {
                            var el = document.getElementById("target");
                            el.href = canvas.toDataURL("image/jpeg");

                            el.download = today+'.jpg';
                            el.click();
                            // el.removeAttribute("href");
                        }
                    });
                });

            });

html2canvas 플러그인을 사용하여 버튼 클릭 시 특정 영역이 캡쳐가 됩니다.

특정영역 안에 있는 모든 요소에 css로 filter: grayscale(100%); 적용했는데.. 캡쳐 후, 다운받은 이미지를 보면 grayscale이 적용되지 않은 이미지가 다운로드 됩니다 뷰페이지에서는 grayscale 적용된걸로 보이는데..

다운받은 이미지도 grayscale 버전으로 다운받고 싶으면 어떻게 해야하는 지 도움요청할 수 있을까요?

구글 검색 등 통해서 이것저것 테스트해봤는데 해결이 안되네요ㅠㅠㅠ

  • (•́ ✖ •̀)
    알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)