CODEWITHSUNDEEP
javascriptangulartypescriptionic-frameworkhtml2canvas
Yehezkiel Gunawan
Yehezkiel Gunawan

Reputation: 19

html2canvas not working in Ionic (version 6.11.0)

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.

Upvotes: 0

Views: 1595

Answers (1)

James Christian
James Christian

Reputation: 26

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();
    })
}

Upvotes: 1

Related Questions