html2canvas error adoptedStyleSheets' property on 'ShadowRoot': And InvalidStateError

Question

I'm trying to add whole div with its style on canvas. I found one solution to use html2canvas But that is giving some style error

    DOMException: Failed to set the 'adoptedStyleSheets' property on 
'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed

and another error is

Uncaught (in promise): InvalidStateError: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
Error: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0

I'm using some drag and drop feature so I just want to convert use that div as an image and merge in canvas.

My page.html

<ion-content no-padding>

  <div #wallDesign class="example-boundary" [style.background-image]="getBackground(imgSrc, saturation)"
    [ngStyle]="{  'background-size': 'cover','background-repeat': 'no-repeat'} ">

    <div class="example-box" (cdkDragEnded)="dragEnd($event)" cdkDragBoundary=".example-boundary" cdkDrag>
      <div class="pre" [style.font-size]="textSize + 'px'" style.opacity="1" [style.font-family]="fontStyle"
        [style.color]="color">
        {{text}}
        <p [style.text-align]="position">- Rupesh yadav</p>
      </div>
    </div>
  </div>

  <ion-button color="secondary" (click)="addWatermark()">AddWaterMark</ion-button>

  <canvas #imageCanvas></canvas>

</ion-content>

This is the function which I'm using to do that

 @ViewChild('wallDesign', {static: false}) draggableDiv : ElementRef;

  addWatermark() {
    const canvasDiv = this.draggableDiv.nativeElement;

    html2canvas(canvasDiv).then((canvas) =>{
      console.log('Console Canvas', canvas)
    });
}

But getting that error. can anyone help me with this?

html2canvas error adoptedStyleSheets' property on 'ShadowRoot': And InvalidStateError

0 Answers0