截屏并显示在 Angular 1.6 的新弹出窗口/选项卡中答案

【问题标题】：Taking screenshots and display in new popup / tab in Angular 1.6截屏并显示在 Angular 1.6 的新弹出窗口/选项卡中
【发布时间】：2018-05-20 06:28:47
【问题描述】：

我是 Angular 新手，我想实现以下场景。

当我点击一个按钮时，我需要截取页面的屏幕截图（jpeg 格式或任何其他图像格式）并使用 Angular 1.6 在新选项卡/弹出窗口中显示屏幕截图。

这是我尝试过的示例代码。

index.html

<script type="text/javascript">
    $(window).load(function() {
        $('#myButton').on('click', function() {
            $("p").clone().appendTo("body");
        });
    });
</script>


<body ng-app="screenApp">
    <div>
        <p id="main">
        <img src="cat.jpg" height="300" width="300"/>
        </p>
        <div ng-controller="screenController">
            <div>
                <button id="myButton" class="btn btn-primary" ng-click="capture()">Click</button>
            </div>
        </div>
    </div>
</body>

modal-form.html

<form name="form.userForm" ng-submit="submitForm()" novalidate>
    <div class="modal-body">
        <div>
            <label>To</label>
            <input type="text" name="name" class="form-control" ng-model="name" required>
        </div>

        <div>
            <label>Bcc</label>
            <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
        </div>

        <div class="form-group">
            <label>Subject</label>
            <input type="email" name="email" class="form-control" ng-model="email" required>
        </div>


        <textarea class="form-control" rows="10" cols="85">
            <div id="copy"></div>   
        </textarea>

    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary" ng-disabled="form.userForm.$invalid">Send</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</form>

app.js

var app = angular.module("screenApp", [ 'ui.bootstrap' ]);
app.controller("screenController", [ '$scope', '$modal', '$log',

function($scope, $modal, $log) {
    $scope.capture = function() {
        $scope.message = "Show Form Button Clicked";
        console.log($scope.message);

        var modalInstance = $modal.open({
            templateUrl : 'modal-form.html',
            controller : ModalInstanceCtrl,
            scope : $scope,
            resolve : {
                userForm : function() {
                    return $scope.userForm;
                }
            }
        });

        modalInstance.result.then(function(selectedItem) {

            $scope.selected = selectedItem;
        }, function() {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
} ]);

var ModalInstanceCtrl = function($scope, $modalInstance, userForm) {
    $scope.form = {}
    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
};

【问题讨论】：

你能发布你已经拥有的代码吗？

标签： jquery angularjs angular-ui-bootstrap

【解决方案1】：

你需要使用任何java脚本库来截取当前页面，我推荐使用thisjava脚本库，示例已经添加在链接中

您需要将其集成到您的 Angular js 代码中，并将生成的图像打开到新选项卡或窗口，

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。