ngx-capture : Unable to capture inside the screen capture area

Question

I'm Unable to capture <img /> inside the screen capture area.

I want a defined section with images and content to be captured. How can we achieve this? Help!

Visit: https://stackblitz.com/edit/ngx-capture-div-angular-wnkjwz?file=src/app/app.component.html

.html

<div #screen style="background: red; color: #FFFFFF">
  <img
    width="100"
    height="100"
    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 }}" />

Component.ts

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

// ----------------------------------------------------------------------------
// "THE BEER-WARE LICENSE" (Revision 42):
// @tmalicet wrote this file.  As long as you retain this notice you
// can do whatever you want with this stuff. If we meet some day, and you think
// this stuff is worth it, you can buy me a beer in return. Thomas Malicet
// ----------------------------------------------------------------------------

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public name = "Angular";
  public img = "";

  @ViewChild("screen", { static: true }) screen: any;

  constructor(private captureService: NgxCaptureService) {}

  onCapture() {
    this.captureService
      .getImage(this.screen.nativeElement, true)
      .pipe(
        tap(img => {
          this.img = img;
          console.log(img);
        })
      )
      .subscribe();
  }
}

score 1 · Answer 1 · answered Aug 18 '22 at 15:26

Thank you for the clean question, its due to using external images that we are getting this issue. After check this answer I have come up with a solution, kindly upvote the original post!

useCORS: true is the solution to your problem! there is currently no way to customize the options of html2canvas so I have come up with an alternative approach!

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

// ----------------------------------------------------------------------------
// "THE BEER-WARE LICENSE" (Revision 42):
// @tmalicet wrote this file.  As long as you retain this notice you
// can do whatever you want with this stuff. If we meet some day, and you think
// this stuff is worth it, you can buy me a beer in return. Thomas Malicet
// ----------------------------------------------------------------------------

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  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();
  }
}

forked stackblitz

Thanks, @Naren Murali, Is any other way to improve image and colour (background) quality? — Sid Sss, Aug 19 '22 at 02:31
@SidSss use scale for high quality image, refer [here](https://stackoverflow.com/questions/22803825/html2canvas-generates-blurry-images) does this answer solve your issue, can it be closed? — Naren Murali, Aug 19 '22 at 03:34
As I update angular version, it's not working, following error occurring: Unhandled Promise rejection: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed ; Zone: ; Task: null ; Value: DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed — Sid Sss, Sep 13 '22 at 11:43
hello is there any solution about, if image is big we need to scroll image and we capture it then, it will capture only area which is visible on browser , means it is not captureing whole div. its is capture just only visible area.... — 13hola, Apr 07 '23 at 07:25
@NarenMurali i already post question for further reference : https://stackoverflow.com/questions/75956511/ngx-capture-unable-to-capture-whole-page — 13hola, Apr 07 '23 at 08:26

score 0 · Answer 2 · answered May 03 '23 at 13:34

0

Version 0.13 now supports external images.

https://ngx-capture-example-component.stackblitz.io/

answered May 03 '23 at 13:34

Thomas Malicet

1
2

2

Thomas Malicet, a link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](/help/deleted-answers) – mozway May 03 '23 at 13:36

ngx-capture : Unable to capture inside the screen capture area

2 Answers2

Linked