Option to disable cloning

[tpwalke2]

Corollary feature request to #1413 and related to #1284.

I understand the need for cloning the element to keep the original version pristine. However, in my case, the element to be rendered is not visible to the user and is destroyed after the series of canvases are created and used.

Could there be a new option to disable the automatic cloning operation?

I'm more than willing to look into adding this as well, if this fits in line with the vision for the library. Do you foresee any potential problems? Or are there things I should take into consideration?

[niklasvh]

It unfortunately isn't very straight forward as it performs the resource loading/inlining of content at the same time.

[Deltaxel]

Hi, My team team is using html2canvas but we have a security issue. We cannot sandbox the iframe since it get cloned (and you can't clone a sandboxed iframe). This feature could solve our problem.

Is there a timeframe for this feature? I sit planed for a near future?

[jfcampos]

Looking for ways to improve performance, in my webVR app I've tried creating an iframe with only my css so I can append pieces of html there and run html2canvas. Still takes between 200 and 600ms to run, most of that time is just cloning the page, which I don't need since i'll empty the document as soon as I get the texture back.

So this feature would be very helpful. Any plans to add it?

[arrix]

I'm working on a project that takes hundreds of screenshots incrementally. Avoiding cloning or reusing cloned document seems the only way to achieve acceptable performance. I'm happy to contribute. @niklasvh Could you suggest where I should start looking and what the key points are? Thank you!

[glebov21]

I'm working on a project that takes hundreds of screenshots incrementally. Avoiding cloning or reusing cloned document seems the only way to achieve acceptable performance. I'm happy to contribute. @niklasvh Could you suggest where I should start looking and what the key points are? Thank you!

do you have solution now? I have similar project.

[RoXuS]

We work on lit-element project with redux, the cloning involves that we relaunch all events to redux and this break our app completly.

Any solution?

[kuige]

In my situation, I only want to turn a specified element into a canvas, which I thought would be very quickly.

However, not only the element is cloned, but the whole page also be cloned, which largely increasing the processing time, and many many resources to load.

[kuige]

Another situation, I want to record the operations of a specific area as video, so I first turn the element of the area into a canvas, draw the canvas into another canvasB, then call canvasB.captureStream().

So the calling of html2canvas will continuously be performed, just like this:

const htmlStreamCanvas = document.createElement('canvas')
const htmlStreamCtx = htmlStreamCanvas.getContext('2d')
// use this stream to record the specific div operations as video
const stream = htmlStreamCanvas.captureStream()
async function animate () {
  let c = await html2canvas(div)
  htmlStreamCtx.drawImage(c)
  requestAnimationFrame(animate)
}
animate()

If html2canvas must first clone the element, the whole document, the the recording will significantly slow down the page's responsiveness.