Angular 移动端页面截屏功能实现：遮罩层显示图片并支持保存分享

截屏

长按图片即可保存或分享

关闭

.container { position: relative; padding: 1rem; }

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; }

.image-wrapper { position: relative; text-align: center; margin: 0 1rem; }

.image-wrapper p { color: white; font-size: 1rem; }

.image-wrapper button { position: absolute; top: 0; right: 0; }

// ts import { Component, ElementRef, ViewChild } from '@angular/core'; import html2canvas from 'html2canvas';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild('example') example: ElementRef; public showOverlay = false; public capturedImage: string;

capture() { html2canvas(this.example.nativeElement).then(canvas => { this.capturedImage = canvas.toDataURL(); this.showOverlay = true; }); }

closeOverlay() { this.showOverlay = false; } }