个人中心
gpt4 book ai didi

javascript - 使用 Angular 时如何获取当前呈现的 (SVG) DOM？

转载 作者：行者123 更新时间：2023-11-30 17:08:10 24 4
gpt4 key购买 nike

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

不幸的是，这就是问题所在。使用 innerHTML在 SVG 绘图上，结果中保留了 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>

最佳答案

一些事情，

  • 您可以使用 $interpolate 创建您的 html 的实时模板，然后将其传递给当前范围以获取呈现的 html。
  • 在使用 img 之前要在 Canvas 上绘制它，您必须等到图像加载完毕(使用它的 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>

关于javascript - 使用 Angular 时如何获取当前呈现的 (SVG) DOM？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27554083/

24 4 0
文章推荐： C: freeRTOS 没有按预期工作
文章推荐： c# - 在 C# 中将大数转换为两个字节
文章推荐： c - 当我按下一个键时，如何使这个球体围绕另一个球体旋转？
文章推荐： c# - 如何构建多个整数键索引(快速查找对象)以供在运算符 (val >= & val <=) 之间使用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com