Screen capture library for Angular. Define a zone and it will capture it and return a string containing a base64 PNG.
Or download the result file.
Angular 8 > npm install [email protected]
Angular 9 > npm install [email protected]
Angular 10+ > npm install ngx-capture
💪 If you like this library, you can buy me a coffee here!
npm install ngx-capture
import { NgModule } from '@angular/core';
import { NgxCaptureModule } from 'ngx-capture';
@NgModule({
...
imports: [
...
NgxCaptureModule,
],
})
export class AppModule {}Define the screen capture area with a variable (eg. #screen):
<div #screen>
<h1>Hey!</h1>
<p>some content</p>
</div>Each time you call the service, it will capture the whole content of the HTML element marked #screen
import { NgxCaptureService } from 'ngx-capture';
...
@ViewChild('screen', { static: true }) screen: any;
...
this.captureService.getImage(this.screen.nativeElement, true)
.pipe(
tap(img => {
console.log(img);
})
).subscribe();This will capture the full page
this.captureService
.getImage(document.body, true)
.pipe(
tap((img) => {
console.log(img);
})
)
.subscribe();This will allow you to click and drag to select the area you want to capture.
ex: https://ngx-capture-example-component.stackblitz.io
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
...
<ngx-capture [target]="screen" (resultImage)="saveImage($event)"></ngx-capture>
`,
})
export class AppComponent {
saveImage(img: string) {
console.log(img);
}
}This way, you can set a specific area to capture.
this.captureService
.getImage(this.screen.nativeElement, false, {
x: 50,
y: 150,
width: 50,
height: 50,
})
.pipe(tap((img) => (this.img = img)))
.subscribe();Once you have the image as a string, you can pass it to the downloadImage method to download it.
this.captureService
.getImage(document.body, true)
.pipe(
tap((img) => {
console.log(img);
}),
tap((img) => this.captureService.downloadImage(img))
)
.subscribe();![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent