ngx-capture
Version:
Screen capture library for Angular
198 lines (191 loc) • 8.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ViewChild, Input, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import html2canvas from 'html2canvas';
import { of, from, Subject } from 'rxjs';
import { take, tap } from 'rxjs/operators';
class NgxCaptureService {
getImage(screen, fullCapture, cropDimensions) {
let options = {
logging: false,
useCORS: true,
scale: 1
};
if (!fullCapture && cropDimensions.width > 10 && cropDimensions.height > 10) {
options = { ...options, ...cropDimensions };
}
else if (!fullCapture) {
return of(null);
}
return from(html2canvas(screen, options)
.then((canv) => {
return canv.toDataURL('image/png');
}, (err) => {
throw new Error(err);
})
.catch((res) => {
throw new Error(res);
}));
}
downloadImage(img) {
const element = document.createElement('a');
element.setAttribute('href', img);
element.setAttribute('download', 'capture');
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
}
NgxCaptureService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgxCaptureService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxCaptureService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgxCaptureService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgxCaptureService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class NgxCaptureComponent {
constructor(captureService) {
this.captureService = captureService;
this.resultImage = new EventEmitter();
this.isDrawing = false;
this.mouseStart = { x: 0, y: 0 };
this.cropDimensions = {
x: 0,
y: 0,
width: 0,
height: 0,
};
this.destroy$ = new Subject();
}
ngOnInit() {
setTimeout(() => {
this.rect = this.rectangle.nativeElement;
this.captureZone = this.overlay.nativeElement;
if (!this.captureZone) {
console.warn('"captureZone" is not set');
return;
}
this.captureZone.onmousedown = (e) => this.startCapture(e);
this.captureZone.onmousemove = (e) => this.drawRect(e);
this.captureZone.onmouseup = () => this.endCapture();
}, 2000);
}
startCapture(e) {
const mouse = this.setMousePosition(e, true);
this.isDrawing = true;
this.cropDimensions = {
x: mouse.x,
y: mouse.y,
width: 0,
height: 0,
};
this.captureZone.style.cursor = 'crosshair';
}
drawRect(e) {
if (this.isDrawing) {
const mouse = this.setMousePosition(e, false);
this.cropDimensions = {
x: mouse.x - this.mouseStart.x < 0 ? mouse.x : this.mouseStart.x,
y: mouse.y - this.mouseStart.y < 0 ? mouse.y : this.mouseStart.y,
width: Math.abs(mouse.x - this.mouseStart.x),
height: Math.abs(mouse.y - this.mouseStart.y),
};
this.setRectangle();
}
}
setMousePosition(e, isStart = false) {
const ev = e || window.event; // Moz || IE
const mouse = { x: 0, y: 0 };
if (ev.pageX) {
// Moz
mouse.x = ev.clientX;
mouse.y = ev.clientY;
}
else if (ev.clientX) {
// IE
mouse.x = ev.clientX + document.body.scrollLeft;
mouse.y = ev.clientY + document.body.scrollTop;
}
if (isStart) {
this.mouseStart.x = mouse.x;
this.mouseStart.y = mouse.y;
}
return mouse;
}
endCapture() {
this.captureZone.style.cursor = 'default';
this.isDrawing = false;
this.captureService
.getImage(this.target, false, {
...this.cropDimensions,
x: this.cropDimensions.x + window.scrollX,
y: this.cropDimensions.y + window.scrollY,
})
.pipe(take(1), tap((img) => {
this.resultImage.emit(img);
}))
.subscribe();
this.cropDimensions = {
x: 0,
y: 0,
width: 0,
height: 0,
};
this.setRectangle();
}
setRectangle() {
this.rect.style.left = this.cropDimensions.x + 'px';
this.rect.style.top = this.cropDimensions.y + 'px';
this.rect.style.width = this.cropDimensions.width + 'px';
this.rect.style.height = this.cropDimensions.height + 'px';
}
}
NgxCaptureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgxCaptureComponent, deps: [{ token: NgxCaptureService }], target: i0.ɵɵFactoryTarget.Component });
NgxCaptureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgxCaptureComponent, selector: "ngx-capture", inputs: { target: "target" }, outputs: { resultImage: "resultImage" }, viewQueries: [{ propertyName: "rectangle", first: true, predicate: ["rect"], descendants: true, static: true }, { propertyName: "overlay", first: true, predicate: ["over"], descendants: true, static: true }], ngImport: i0, template: `
<ng-content></ng-content>
<div class="overlay" #over>
<div class="rectangle" #rect></div>
</div>
`, isInline: true, styles: [".overlay{top:0;left:0;position:fixed;width:100vw;height:100vh}.rectangle{border:1px solid #ff0000;position:absolute}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgxCaptureComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-capture', template: `
<ng-content></ng-content>
<div class="overlay" #over>
<div class="rectangle" #rect></div>
</div>
`, styles: [".overlay{top:0;left:0;position:fixed;width:100vw;height:100vh}.rectangle{border:1px solid #ff0000;position:absolute}\n"] }]
}], ctorParameters: function () { return [{ type: NgxCaptureService }]; }, propDecorators: { rectangle: [{
type: ViewChild,
args: ['rect', { static: true }]
}], overlay: [{
type: ViewChild,
args: ['over', { static: true }]
}], target: [{
type: Input
}], resultImage: [{
type: Output
}] } });
class NgxCaptureModule {
}
NgxCaptureModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgxCaptureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxCaptureModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: NgxCaptureModule, declarations: [NgxCaptureComponent], exports: [NgxCaptureComponent] });
NgxCaptureModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgxCaptureModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgxCaptureModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgxCaptureComponent],
imports: [],
exports: [NgxCaptureComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
/*
* Public API Surface of ngx-capture
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxCaptureComponent, NgxCaptureModule, NgxCaptureService };
//# sourceMappingURL=ngx-capture.mjs.map