html2canvas not working in Ionic (version 6.11.0)

Issue

I have a project to change the selected HTML elements in Ionic (Angular) into the image. I want to load the converted image to my web app. I have used html2canvas library, but I got a problem here, the converted image cannot load into my web page.

Here my home.page.html code

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content>

  <div id="container">
    <ion-card>
      <ion-card-header>
        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
        <ion-card-title>Card Title</ion-card-title>
      </ion-card-header>
    
      <ion-card-content>
        Keep close to Nature's heart... and break clear away, once in awhile,
        and climb a mountain or spend a week in the woods. Wash your spirit clean.
      </ion-card-content>
    </ion-card>
  </div>
  <ion-button (click)="convertToImage()">Convert to Image</ion-button>

Here is my home.page.ts code

import { Component } from "@angular/core";
import html2canvas from "html2canvas";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"],
})
export class HomePage {
  
  constructor() {}

  

  convertToImage() {
    let element = document.getElementById("container");
    html2canvas(element).then(function(canvas) {
      element.appendChild(canvas);
  });
  }
}

When I run ionic serve and click the button, I got this error in my browser.

index-92848855.js:1957 DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed

Anyone know what the problem is and what is the solution to resolve this? Thank you.

Solution

Try to use domtoimage from https://www.npmjs.com/package/dom-to-image

I change the convertToImage function to this

convertToImage() {
    let result = document.querySelector("#result");
    let container = document.querySelector("#container");

    domtoimage.toJpeg(container).then( dataUrl => {
      var img = new Image();
      img.src = dataUrl;
      result.appendChild(img);

      var link = document.createElement('img')
      link.src = dataUrl
      
      // Down below is to open another window with the picture in it and ready to print
      var WinPrint = window.open(
        "",
        "",
        "left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
      );
    
      WinPrint.document.write(link.outerHTML);
      WinPrint.document.close();
      WinPrint.focus();
      WinPrint.print();
    })
}

Answered By - James Christian