【Bug Report】Page resources repetitively requested

[chenyiqiao]

html2canvas version tested with: 1.0.0-rc.5

I found that calling html2canvas function would cause html page resource get requested again. The situation is I'm using html2canvas to convert html page that could be very long, so I have to consider about the canvas size limit. The solution for me is to break the page into multiple parts and convert each part into canvas:

function generateCanvas(element) {
  return new Promise((resolve, reject) => {
    html2canvas(element, {scale: 2, useCORS: true}).then(function(canvas) {
      resolve(canvas)
    })
  })
}

let generateCanvasPromiseList = []
// elementList is an array that contains the whole page
elementList.forEach(element => {
  generateCanvasPromiseList.push(this.generateCanvas(element))
})

Promise.all(generateCanvasPromiseList).then(canvasList => {
  // handle generated canvas 
})

The result is html2canvas repetitively send page resource request:

Each request of my html page is requested as many times as html2canvas get called. After checking chrome initiator, it guides me to the DocumentCloner.toIFrame function of this line:

documentClone.replaceChild(documentClone.adoptNode(this.documentElement), documentClone.documentElement);

I think this line of code end up with attaching the cloned html page into iframe, thus sending resource request again. I'm not sure how to fix this yet, but i think send every request again is inappropriate.

[chenyiqiao]

https://github.com/niklasvh/html2canvas/issues/1284#issuecomment-652844658 I think this hack from @K-D-K is the best workaround right now, but is it possible to specify elements that are needed to clone, rather than find out elments to ignore? This might make things much easier.

[K-D-K]

@chenyiqiao actually we specifying the elements which needed to clone. we ignoring elements which don't have white_list_class.