ngx-capture
Version:
Screen capture library for Angular
140 lines (105 loc) • 2.82 kB
Markdown
# NGX-CAPTURE
[](https://badge.fury.io/js/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](https://stackblitz.com/edit/ngx-capture-example-12)
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!](https://ko-fi.com/wanchai_coding)
## Example
### Install
```
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
<div #screen>
<h1>Hey!</h1>
<p>some content</p>
</div>
```
## The is 4 ways to use this library
### For a full element capture, use the service:
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();
```
### For the entire BODY
This will capture the full page
```ts
this.captureService
.getImage(document.body, true)
.pipe(
tap((img) => {
console.log(img);
})
)
.subscribe();
```
### To access crop options, use the component
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: `
...
<ngx-capture [target]="screen" (resultImage)="saveImage($event)"></ngx-capture>
`,
})
export class AppComponent {
saveImage(img: string) {
console.log(img);
}
}
```
### Using crop options freely
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();
```