使用Angular时如何获取当前渲染的（SVG）DOM？

时间：2014-12-18 19:19:13

标签： javascript angularjs html5 canvas svg

我使用Angular组合了一个简单的HTML页面，可以更新SVG绘图。这一切都很好，并且很费力。但是，我希望能够在浏览器中将SVG呈现为PNG文件，以便于下载和重用。

SVG绘图设置如下：

<svg viewBox="0 0 512 512" width="512" height="512" id="svg">
  <linearGradient id="background-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
    <stop offset="0%" stop-color="{{background.start}}"/>
    <stop offset="100%" stop-color="{{background.end}}"/>
  </linearGradient>
  <linearGradient id="primary-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
    <stop offset="0%" stop-color="{{primary.start}}"/>
    <stop offset="100%" stop-color="{{primary.end}}"/>
  </linearGradient>
  <linearGradient id="accent-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
    <stop offset="0%" stop-color="{{accent.start}}"/>
    <stop offset="100%" stop-color="{{accent.end}}"/>
  </linearGradient>

  <polygon points="256,0 478,128 478,384 256,512 34,384 34,128" fill="url(#background-gradient)"/>

  <path d="M256,256 m-128,0 a128,128 0 1,1 256,0 a128,128 0 1,1 -256,0 Z M208,224 m-28,0 a28,28 0 1,1 56,0 a28,28 0 1,1 -56,0 Z M304,224 m-28,0 a28,28 0 1,1 56,0 a28,28 0 1,1 -56,0 Z M256,304 m40,0 a40,40 0 1,1 -80,0 Z" fill-rule="evenodd" fill="url(#primary-gradient)"/>
  <path d="M216,224 m-16,0 a16,16 0 1,1 32,0 a16,16 0 1,1 -32,0 Z M296,224 m-16,0 a16,16 0 1,1 32,0 a16,16 0 1,1 -32,0 Z" fill-rule="evenodd" fill="url(#accent-gradient)"/>
</svg>

请注意，渐变中的stop-color来自Angular模型。渲染到PNG时，我使用SVG源创建Image，将其绘制到JavaScript创建的<canvas>上，然后将<canvas>内容转换为data: URI

不幸的是，这就是崩溃的原因。在SVG图纸上使用innerHTML会在结果中留下Angular占位符，而不是按预期更换它们。这意味着所有的渐变都是完全黑色的，因为它们的颜色值实际上是{{background.start}}等。显然这不会产生好的结果☺

所以我的问题是这样的：如何才能获得要显示的SVG DOM，这样我才能成功创建PNG？

我一直在Linux上测试Chrome v39和v40（带有各种次要版本）。重现代码：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html ng-app="BadgeCreator">
  <head>
    <title>Badge Creator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script>
var app = angular.module('BadgeCreator', [])
  .config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|data):/);
    }
]);
app.controller('BadgeController', ['$scope', function($scope) {
  var updateDownloadLink = function() {
    var ctx, mycanvas, svg_data, img, child, target = document.getElementById('svg');

    // Construct an SVG image
    svg_data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + target.offsetWidth +
               '" height="' + target.offsetHeight + '">' + target.innerHTML + '</svg>';
    console.log(svg_data);
    img = new Image();
    img.src = "data:image/svg+xml," + encodeURIComponent(svg_data);

    // Draw the SVG image to a canvas
    mycanvas = document.createElement('canvas');
    mycanvas.width = target.offsetWidth;
    mycanvas.height = target.offsetHeight;
    ctx = mycanvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Return the canvas's data
    $scope.downloadUrl = mycanvas.toDataURL("image/png");
  };

  $scope.background = {start: '#111', end:'#333'};
  $scope.primary = {start: '#c96', end:'#963'};
  $scope.accent = {start: '#3cf', end:'#39c'};

  $scope.$watch('background', updateDownloadLink, true);
  $scope.$watch('primary', updateDownloadLink, true);
  $scope.$watch('accent', updateDownloadLink, true);
}]);
</script>
    <style>
.checkerback {
  background-color: #fff;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
  background-size:64px 64px;
  background-position:0 0, 32px 32px;
  border: 1px solid #ccc;
}
    </style>
</head>
  <body ng-controller="BadgeController">
    <div style="width:512px; height:512px; margin: 0 auto;" class="checkerback">
      <svg viewBox="0 0 512 512" width="512" height="512" id="svg">
        <linearGradient id="background-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
          <stop offset="0%" stop-color="{{background.start}}"/>
          <stop offset="100%" stop-color="{{background.end}}"/>
        </linearGradient>
        <linearGradient id="primary-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
          <stop offset="0%" stop-color="{{primary.start}}"/>
          <stop offset="100%" stop-color="{{primary.end}}"/>
        </linearGradient>
        <linearGradient id="accent-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
          <stop offset="0%" stop-color="{{accent.start}}"/>
          <stop offset="100%" stop-color="{{accent.end}}"/>
        </linearGradient>

        <polygon points="256,0 478,128 478,384 256,512 34,384 34,128" fill="url(#background-gradient)"/>
        
        <path d="M256,256 m-128,0 a128,128 0 1,1 256,0 a128,128 0 1,1 -256,0 Z M208,224 m-28,0 a28,28 0 1,1 56,0 a28,28 0 1,1 -56,0 Z M304,224 m-28,0 a28,28 0 1,1 56,0 a28,28 0 1,1 -56,0 Z M256,304 m40,0 a40,40 0 1,1 -80,0 Z" fill-rule="evenodd" fill="url(#primary-gradient)"/>
        <path d="M216,224 m-16,0 a16,16 0 1,1 32,0 a16,16 0 1,1 -32,0 Z M296,224 m-16,0 a16,16 0 1,1 32,0 a16,16 0 1,1 -32,0 Z" fill-rule="evenodd" fill="url(#accent-gradient)"/>
      </svg>
    </div>
    <p style="text-align: right"><a href="{{downloadUrl}}" download="badge.png">Download image</a></p>
  <p>Background: <input ng-model="background.start">&ndash;<input ng-model="background.end"></p>
  <p>Primary: <input ng-model="primary.start">&ndash;<input ng-model="primary.end"></p>
  <p>Accent: <input ng-model="accent.start">&ndash;<input ng-model="accent.end"></p>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

有几件事，

  • 您可以使用$interpolate创建html的实时模板，然后将其传递给当前范围以获取呈现的html。
  • 在使用img在画布上绘制之前，您必须等到图像加载（使用其onload事件）
  • 获取<svg>元素的width / height属性以获取尺寸

重构代码

var app = angular.module('BadgeCreator', [])
  .config([
    '$compileProvider',
    function($compileProvider) {
      $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|data):/);
    }
  ]);
app.controller('BadgeController', ['$scope', '$interpolate',
  function($scope, $interpolate) {
    var target = document.getElementById('svg'),
      ngElement = angular.element(target),
      svgExpression = $interpolate(ngElement.html()),
      updateDownloadLink = function(newval, oldval, scope) {

        var ctx, mycanvas, svg_data, img, child,
          liveHtml = svgExpression(scope),
          svgWidth = parseInt(target.getAttribute('width'), 10),
          svgHeight = parseInt(target.getAttribute('height'), 10),
          svg_data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + svgWidth + '" height="' + svgHeight + '">' + liveHtml + '</svg>',
          img = new Image();

        img.onload = function() {
          // Draw the SVG image to a canvas
          mycanvas = document.createElement('canvas');
          mycanvas.width = svgWidth;
          mycanvas.height = svgHeight;
          ctx = mycanvas.getContext("2d");
          ctx.drawImage(img, 0, 0);

          // Return the canvas's data
          scope.$apply(function() {
            scope.downloadUrl = mycanvas.toDataURL("image/png");
          });
        };
        img.src = "data:image/svg+xml," + encodeURIComponent(svg_data);
      };

    $scope.background = { start: '#111', end: '#333' };
    $scope.primary = { start: '#c96', end: '#963' };
    $scope.accent = { start: '#3cf', end: '#39c' };

    $scope.$watch('background', updateDownloadLink, true);
    $scope.$watch('primary', updateDownloadLink, true);
    $scope.$watch('accent', updateDownloadLink, true);
  }
]);
.checkerback {
  background-color: #fff;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
  background-size: 64px 64px;
  background-position: 0 0, 32px 32px;
  border: 1px solid #ccc;
}
<!DOCTYPE html>
<html ng-app="BadgeCreator">

<head>
  <title>Badge Creator</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>

<body ng-controller="BadgeController">
  <div style="width:512px; height:512px; margin: 0 auto;" class="checkerback">
    <svg viewBox="0 0 512 512" width="512" height="512" id="svg">
      <linearGradient id="background-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
        <stop offset="0%" stop-color="{{background.start}}" />
        <stop offset="100%" stop-color="{{background.end}}" />
      </linearGradient>
      <linearGradient id="primary-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
        <stop offset="0%" stop-color="{{primary.start}}" />
        <stop offset="100%" stop-color="{{primary.end}}" />
      </linearGradient>
      <linearGradient id="accent-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
        <stop offset="0%" stop-color="{{accent.start}}" />
        <stop offset="100%" stop-color="{{accent.end}}" />
      </linearGradient>

      <polygon points="256,0 478,128 478,384 256,512 34,384 34,128" fill="url(#background-gradient)" />

      <path d="M256,256 m-128,0 a128,128 0 1,1 256,0 a128,128 0 1,1 -256,0 Z M208,224 m-28,0 a28,28 0 1,1 56,0 a28,28 0 1,1 -56,0 Z M304,224 m-28,0 a28,28 0 1,1 56,0 a28,28 0 1,1 -56,0 Z M256,304 m40,0 a40,40 0 1,1 -80,0 Z" fill-rule="evenodd" fill="url(#primary-gradient)"
      />
      <path d="M216,224 m-16,0 a16,16 0 1,1 32,0 a16,16 0 1,1 -32,0 Z M296,224 m-16,0 a16,16 0 1,1 32,0 a16,16 0 1,1 -32,0 Z" fill-rule="evenodd" fill="url(#accent-gradient)" />
    </svg>
  </div>
  <p style="text-align: right"><a href="{{downloadUrl}}" download="badge.png">Download image</a>
  </p>
  <p>Background:
    <input ng-model="background.start">&ndash;
    <input ng-model="background.end">
  </p>
  <p>Primary:
    <input ng-model="primary.start">&ndash;
    <input ng-model="primary.end">
  </p>
  <p>Accent:
    <input ng-model="accent.start">&ndash;
    <input ng-model="accent.end">
  </p>
</body>

</html>

相关问题
最新问题