Html2Canvas foreignObjectRendering only render viewpoint

问题

I'm currently having issues while rendering complex DIV element into CANVAS element using Html2Canvas package. The problem is the DIV I want to write to the CANVAS, has

overflow: auto 

So the DIV is bigger than the screen ratio. and to add gasoline to the fire, all described above is in the Angular 5 component, what means the CSS isn't available while I'm accessing to ElementRef.nativeElement.innerHTML.

Encapsulation.None didn't work for me here either.

HTML to canvas settings:

  async: true,
  logging: false,
  backgroundColor: null,
  allowTaint: true,
  foreignObjectRendering: true,
  removeContainer: true

result:

make attention to the black space around the image, is the screen ratio, but it couldn't be rendered.

While I'm setting:

foreignObjectRendering: false

I'm getting very satisfying quality and the dimensions I want. but the diagrams look like this:

Thanks in advance! this is very important to me. And I guarantee that if I will resolve this, I'll create a very useful NPM package to export elements as PDF file at Angular 2+

Also attaching Html2Canvas documentation for your convenient: http://html2canvas.hertzen.com/configuration/

来源：https://stackoverflow.com/questions/53563864/html2canvas-foreignobjectrendering-only-render-viewpoint