Looping html2canvas

Question

for 루프에서 html2canvas 스크립트를 구현하는 데 문제가 있습니다.

데이터 그룹을 사용하여 요소 그룹의 스타일을 수정하고 컨테이너 div를 캔버스로 캡처 한 다음이를 이미지로 변환하고 문서 본문에 추가 한 다음 이동하는 Javascript 함수를 작성하고 있습니다. 배열의 다음 색인으로 넘어갑니다. 이 캔버스를 기다리고되지 않는다는 것을 내가 찾은 스크립트를 단계적으로 이동하여

html2canvas(document.getElementById("background"), { 
    onrendered: function(canvas) { 
     var imgdata = canvas.toDataURL("image/png"); 
     var obj = document.createElement("img"); 
     obj.src=imgdata; 
     document.body.appendChild(obj); 
    } 
}); 

:

내가하는 데 문제 부분은 내 루프의 맨 끝에 for 루프의 다음 반복 단계로 넘어 가기 전에 렌더링을하면 렌더링을하는 모든 이미지가 (배열의 최종 인덱스와 똑같이) 똑같이 보이도록 캡처하려고하는 요소가 생성됩니다.

캔버스가 렌더링되는 동안 스크립트를 잠시 지연시키는 방법이 있습니까? setTimeout()을 사용해 보았는데 스크립트를 지연시키는 다른 방법을 찾지 못하는 것 같습니다. onrendered 코드 부분이 익숙하지 않습니다.

나의 설명이 명확하지 않은 경우 곧 몇 가지 적절한 예를 준비 할 것입니다.

Answer 1

당신은 비동기 워크 플로우에 대해 읽고 할 수 있습니다 (같은 https://github.com/caolan/async)

은 즉,이 시도 : 우리가 onrendered이 완료 만 nextStep를 호출 할 것입니다

var i = 0; 
function nextStep(){ 
    i++; 
    if(i >= 30) return; 
    // some body 
    html2canvas(... 
    onrendered: function(canvas){ 
     // that img stuff 
     nextStep(); 
    } 
    } 
} 
nextStep(); 

합니다.

Answer 2

코드 코드는 코드의 각 문이 차례로 실행된다는 것을 의미합니다.

비동기 코드는 반대이며, 주 프로그램 흐름 외부의 명령문을 사용합니다. 함수에 html2canvas 코드를 래핑하여

for (let i = 0; i < array.length; i++) { 
    generateCanvas(i); 
} 

function generateCanvas(i){ 
    html2canvas(.. 
    // you can use i here 
) 
} 

: 루프 완료 할 수 있으며, i이 html2canvas 코드를 실행하기 전에 20이 될 수 있도록 비동기 적으로 작동

html2canvas ..

하나의 솔루션은 다음과 같이이다 "i"의 값이 의도 한대로 유지되도록합니다.