html2canvas 在 Ionic 中不起作用（版本 6.11.0）

Question

我有一个项目将 Ionic (Angular) 中选定的 HTML 元素更改为图像。我想将转换后的图像加载到我的网络应用程序中。我使用了 html2canvas 库，但是我在这里遇到了问题，转换后的图像无法加载到我的网页中。

这是我的 home.page.html 代码

<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>

这是我的 home.page.ts 代码

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

当我运行ionic serve 并单击按钮时，我的浏览器中出现此错误。

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

任何人都知道问题是什么以及解决此问题的解决方案是什么？谢谢。

Answer 1

尝试使用来自https://www.npmjs.com/package/dom-to-image的domtoimage

我把 convertToImage 函数改成这个

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