npm i ngx-capture
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import { Component, ViewChild, OnInit } from '@angular/core'; import { NgxCaptureService } from 'ngx-capture'; import { tap } from 'rxjs/operators'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { name = 'Angular'; img = ''; body = document.body; @ViewChild('screen', { static: true }) screen: any; constructor(private captureService: NgxCaptureService) {} ngOnInit() {} divCapture() { this.captureService .getImage(this.screen.nativeElement, true) .pipe( tap((img: string) => { this.img = img; console.log(img); }) ) .subscribe(); } fullCapture() { this.captureService .getImage(this.body, true) .pipe( tap((img: string) => { this.img = img; console.log(img); }) ) .subscribe(); } fullCaptureWithDownload() { this.captureService .getImage(this.body, true) .pipe( tap((img: string) => { this.img = img; console.log(img); }), tap((img) => this.captureService.downloadImage(img)) ) .subscribe(); } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div #screen> <hello name="{{ name }}"></hello> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo ligula ut metus volutpat, non congue elit ornare. Phasellus viverra gravida justo, et gravida nulla tincidunt ut. Sed condimentum vehicula nulla sit amet rhoncus. Ut tincidunt libero rhoncus eleifend mollis. Proin mollis tortor vel odio tempor, a sodales nisl hendrerit. Ut velit orci, feugiat non placerat id, sollicitudin quis purus. Phasellus vulputate ipsum in nibh sodales, sed vehicula magna sagittis. Donec in tempus libero. </p> <p>Start editing to see some magic happen :)</p> <div class="block"></div> </div> <br /><br /><br /> <hr /> <button (click)="divCapture()">DIV capture</button> <br /> <br /> <button (click)="fullCapture()">Full BODY capture</button> <br /> <br /> <button (click)="fullCaptureWithDownload()">Full BODY capture & Download</button> <h2>My Capture:</h2> <img src="{{ img }}" /> |
FULL SOURCE CODE
