ngx-capture : Unable to capture

Question

On click Capture button following error occurring: Unhandled Promise rejection: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed;

Ionic info

Ionic:

   Ionic CLI                     : 6.20.1 (C:\Users\eight\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.2.6
   @angular-devkit/build-angular : 14.2.2
   @angular-devkit/schematics    : 14.2.2
   @angular/cli                  : 14.2.2
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.0.1
   @capacitor/android : not installed
   @capacitor/core    : 4.0.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.0

System:

   NodeJS : v16.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.14.0
   OS     : Windows 10

example.html

<ion-content>
<ion-grid>
  <ion-row>
    <ion-col size="3">
      <div #screen style="background: red; color: #FFFFFF">
        <img
          width="100"
          height="120"
          alt="image"
          src="https://images.unsplash.com/photo-1546961329-78bef0414d7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
        />
        <hello name="{{ name }}"></hello>
        <p>Start editing to see some magic happen :)</p>
      </div>
      
      <button (click)="onCapture()">Capture</button>
      
      <img src="{{ img }}" />
      
    </ion-col>    
  </ion-row>
</ion-grid>
</ion-content>

example.page.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { NgxCaptureService } from 'ngx-capture';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  templateUrl: './example.page.html',
  styleUrls: ['./example.page.scss'],
})
export class ExamplePage{

  public name = 'Angular';
  public img = '';

  @ViewChild('screen', { static: true }) screen: ElementRef<any>;

  constructor(private captureService: NgxCaptureService) {}

  onCapture() {
    const dimensions = this.screen.nativeElement.getBoundingClientRect();
    this.captureService
      .getImage(this.screen.nativeElement, false, {
        width: dimensions.width,
        height: dimensions.height,
        useCORS: true,
      })
      .pipe(
        tap((img) => {
          this.img = img;
          console.log(img);
        })
      )
      .subscribe();
  }

}

ref: ngx-capture : Unable to capture <img> inside the screen capture area

Is anything still missing? How can we solve this issue? Solution, please.

ngx-capture : Unable to capture

0 Answers0