2016-06-20 1 views
0

나는 html2canvas javascript 라이브러리를 사용하여 매초 여러 번 스크린 샷을 찍지만 브라우저 세션이 상당히 느려집니다. 라이브러리 함수는 기본적으로 DOM 요소를 가져 와서 루프 처리하고 캔버스 요소로 재생합니다. 필자는 매번 문서 본문을 웹 작업자에게 전달하여 개별적으로 기능을 실행하려고합니다. 근로자는 DOM에 액세스 할 수 없다는 것을 알고 있지만 postMessage 인수로 전달하기 위해 본문을 직렬화 할 수있는 방법이 있습니까?웹 작업자가 편집하지 않고 문서 본문을 전달합니다.

+1

본문을 일반 HTML 텍스트로 보낼 수 있습니다. 그러나 문제는 근로자가 캔버스 요소에 액세스 할 수없고 그리기 방법이기 때문입니다. AFAIK, html2canvas 라이브러리는 캔버스에 그려진 SVG를 사용합니다. –

답변

1

내가 postMessage 인수로 전달하기 위해 본문을 직렬화 할 수있는 방법이 있습니까? 토마스 Zato가 지적으로

예, outerHTML

var worker = new Worker("worker.js"); 
document.addEventListener("DOMContentLoaded", function(event) { 
    worker.postMessage(document.body.outerHTML); 
}); 

(예를 들어) 및 그러나 https://plnkr.co/edit/M0OoIEiarr0HsOiSANUs?p=preview

에서 볼 수 worker.js

self.onmessage = function(e) { 
    console.log('In worker', e.data); 
}; 

에 사용 , html2canvas은 웹 작업자에게는 작동하지 않을 수 있습니다.

+0

감사합니다. 나는 그것을 반드시 시도 할 것이다. –

+0

DOM을 직렬화 할 수 있습니까? html, 인라인 CSS, 문서 내 스크립트 + 페이지에 추가 된 모든 스크립트/링크를 포함한 모든 것? – hipkiss

+0

DOM을 직렬화 할 수는 있지만 DOM 메서드와 추가 한 함수는 직렬화 할 수 없습니다. html2canvas는 캔버스 메서드에 크게 의존하므로 쉽게 (쉽게) 작동하지 않습니다. – Nick

관련 문제