Angular 1.6实现点击按钮截图并在新标签/弹窗展示

Hey there! Since you're new to Angular 1.6 and want to capture a screenshot of your page (in JPEG or other formats) when clicking a button, then display it in a new tab or modal, let's use html2canvas—a reliable library for converting HTML elements to images. Here's how to adapt your code to make this work:

Step 1: Add the html2canvas Library #

First, include the library in your index.html (we'll use a CDN for simplicity):

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.0.0-rc.12/html2canvas.min.js"></script>

Step 2: Update Your Angular Controller & Modal Logic #

Modify your app.js to handle the screenshot capture, generate an image URL, and pass it to your modal (or open it in a new tab):

var app = angular.module("screenApp", ['ui.bootstrap']);

app.controller("screenController", ['$scope', '$modal', '$log', function($scope, $modal, $log) {
  $scope.capture = function() {
    // Target the element you want to capture (here, the #main paragraph with the cat image)
    const targetElement = document.getElementById('main');
    
    html2canvas(targetElement, {
      useCORS: true, // Critical if your images come from external sources
      backgroundColor: '#ffffff' // Set a solid background if your content has transparency
    }).then(canvas => {
      // Convert canvas to JPEG image data URL (adjust quality from 0 to 1 as needed)
      const imageUrl = canvas.toDataURL('image/jpeg', 0.9);
      
      // Option 1: Uncomment below to open screenshot in a new tab
      // window.open(imageUrl, '_blank');
      
      // Option 2: Pass the image to modal for in-app display
      const modalInstance = $modal.open({
        templateUrl: 'modal-form.html',
        controller: ModalInstanceCtrl,
        resolve: {
          screenshotUrl: function() {
            return imageUrl;
          }
        }
      });

      modalInstance.result.then(function() {
        $log.info('Modal closed successfully');
      }, function() {
        $log.info('Modal dismissed at: ' + new Date());
      });
    }).catch(error => {
      $log.error('Screenshot capture failed:', error);
    });
  };
}]);

var ModalInstanceCtrl = function($scope, $modalInstance, screenshotUrl) {
  $scope.screenshot = screenshotUrl; // Make image URL accessible to modal template

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };

  // Optional: Add a download function for the screenshot
  $scope.downloadScreenshot = function() {
    const link = document.createElement('a');
    link.href = screenshotUrl;
    link.download = 'page-screenshot.jpg';
    link.click();
  };
};

Step 3: Modify the Modal Template to Display the Screenshot #

Update your modal-form.html to show the captured image (you can keep the form if needed, but let's focus on the screenshot display first):

<div class="modal-body">
  <h4>Captured Screenshot</h4>
  <img ng-src="{{screenshot}}" class="img-responsive" alt="Page Screenshot" style="max-width: 100%;" />
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="downloadScreenshot()">Download Screenshot</button>
  <button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>

Step 4: Clean Up Your index.html #

Remove the unused jQuery code (we're using Angular's ng-click now) and simplify your markup:

<body ng-app="screenApp">
  <div>
    <p id="main">
      <img src="cat.jpg" height="300" width="300"/>
    </p>
    <div ng-controller="screenController">
      <button class="btn btn-primary" ng-click="capture()">Capture & View Screenshot</button>
    </div>
  </div>
  <!-- Don't forget to include Angular, UI Bootstrap, and html2canvas scripts here -->
</body>

Key Tips: #

• Capture Entire Page: Replace document.getElementById('main') with document.body if you want to screenshot the whole page.
• PNG Format: Use canvas.toDataURL('image/png') instead of JPEG if you need lossless image quality.
• Cross-Origin Images: If your images are from external domains, ensure useCORS: true is enabled and the image server allows cross-origin requests.

内容的提问来源于stack exchange，提问作者Sivaranjani