Question

我是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>

模态-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');
    };
};

Answer 1

您需要使用任何java脚本库来截取当前页面的截图，我建议使用this java脚本库，该示例已添加到链接中

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

截图并在Angular 1.6中的新弹出窗口中显示

1 个答案: