Screen capture library for Angular. Define a zone and it will capture it and return a string containing a base64 PNG.
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 (#screen):
<div #screen>
<h1>Hey!</h1>
<p>some content</p>
</div>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.captureService.getImage(document.body, true)
.pipe(
tap(img => {
console.log(img);
})
).subscribe();
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);
}
}
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent