Снимки экрана и отображение в новом всплывающем окне / вкладке в Angular 1.6 - PullRequest
Новая
       10

Снимки экрана и отображение в новом всплывающем окне / вкладке в Angular 1.6

0 голосов
/ 20 мая 2018

Я новичок в 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');
    };
};

1 Ответ

0 голосов
/ 20 мая 2018

Вам нужно использовать любую библиотеку java-скриптов, чтобы сделать скриншот текущей страницы, я бы рекомендовал использовать эту библиотеку java-скриптов, пример уже добавлен в ссылку

Вам необходимо интегрировать его в свой угловой код js и открыть сгенерированное изображение на новой вкладке или в окне

...