angular - ngx-捕获 : Unable to capture inside the screen capture area

Question

我无法捕获 <img />在屏幕捕获区域内。

我想要一个定义的部分，其中包含要捕获的图像和内容。我们怎样才能做到这一点？帮助!

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

Answer 1

感谢您提出干净的问题，由于使用了外部图像，我们遇到了这个问题。检查此answer后我想出了一个解决方案，请为原帖点赞!

useCORS: true 是您问题的解决方案!目前无法自定义 html2canvas 的选项，所以我想出了一个替代方法!

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