如何以角度 5 截取屏幕截图或屏幕视频

Question

我正在使用 angular 5 示例项目，想要使用 angular5 组件结构为屏幕截图或捕获屏幕视频构建功能。

Answer 1

对于屏幕截图，这个库应该可以解决问题。

npm install angular-screenshot

基本使用示例：使用屏幕截图作为元素或属性，然后使用默认模板并覆盖默认子元素

    <button class="btn btn-fab" ng-class="{true: 'btn-danger', false: 'btn-default'}
[appCtrl.isBasicOpen]" ng-click="appCtrl.isBasicOpen = !appCtrl.isBasicOpen">
    <i ng-if="!appCtrl.isBasicOpen" class="material-icons">crop</i>
    <i ng-if="appCtrl.isBasicOpen" class="material-icons">close</i>
</button>
<!--screenshot-->
<screenshot is-open="appCtrl.isBasicOpen">
    <div class="panel-body">
        ...
    </div>
</screenshot>

使用目标参数设置元素上的屏幕截图部分

<div id="target1" class="panel panel-info">
    ...
    <div class="panel-body">
        <screenshot target="{{::'#target1'}}" is-open="appCtrl.target1Open" toolbox-options="appCtrl.target1Options"></screenshot>
            ...
    </div>
</div>

'use strict';
(function () {
angular.module('app', ['angular-screenshot'])
.controller('AppController', ['$scope', appController]);
    function appController($scope) {
        var self = this;
        self.target1Options = {
            filename: 'target1.png',
            downloadText: 'Download me',
            cancelText: 'Close it!'
        };
    }
})()