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

user_7136100 0
Viewed 127

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();
  }
}
stackblitz angular typescript
1 Answers

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

user_59245620
Related