NGX-CAPTURE


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.

Stackblitz Example

Angular 8 > npm install ngx-capture@0.0.3-alpha

Angular 9 > npm install ngx-capture@0.0.4-beta

Angular 10+ > npm install ngx-capture

💪 If you like this library, you can buy me a coffee here!

Example

$3

``
npm install ngx-capture
`

`ts
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):

`html

Hey!

some content

`

The is 4 ways to use this library

$3

Each time you call the service, it will capture the whole content of the HTML element marked #screen

`ts
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();
`

$3

This will capture the full page

`ts
this.captureService
.getImage(document.body, true)
.pipe(
tap((img) => {
console.log(img);
})
)
.subscribe();
`

$3

This will allow you to click and drag to select the area you want to capture.

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

`ts
import { Component } from '@angular/core';

@Component({
selector: 'app',
template:
...

,
})
export class AppComponent {
saveImage(img: string) {
console.log(img);
}
}
`

$3

This way, you can set a specific area to capture.

`ts
this.captureService
.getImage(this.screen.nativeElement, false, {
x: 50,
y: 150,
width: 50,
height: 50,
})
.pipe(tap((img) => (this.img = img)))
.subscribe();
`

Download the result directly

Once you have the image as a string, you can pass it to the downloadImage method to download it.

`ts
this.captureService
.getImage(document.body, true)
.pipe(
tap((img) => {
console.log(img);
}),
tap((img) => this.captureService.downloadImage(img))
)
.subscribe();
``