使用 Angular 时如何获取当前渲染的 (SVG) DOM？答案

【问题标题】：How can I get the currently-rendered (SVG) DOM when using Angular?使用 Angular 时如何获取当前渲染的 (SVG) DOM？
【发布时间】：2015-02-17 16:23:51
【问题描述】：

我使用 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-colors 来自 Angular 模型。渲染为 PNG 时，我使用 SVG 源创建一个 Image，将其绘制到 JavaScript 创建的 <canvas>，然后将 <canvas> 内容转换为 data: URI。

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

所以我的问题是：我怎样才能获得为显示而渲染的 SVG DOM，以便成功创建 PNG？

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

<!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>

【问题讨论】：

标签： javascript angularjs html canvas svg

【解决方案1】：

几件事，

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

重构代码

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>

【讨论】：