javascript - svg 导出到 png 仅使用 Angular 导出 JavaScript 中渲染的 svg 的一小部分/一小部分

Question

我需要一些关于将渲染的 svg 词云导出为 png 的建议。

我的设置可以正常工作，但它只导出渲染词云的一小部分。

我认为这可能与我需要设置的尺寸有关。我不知道。

这是我的 Angular/JavaScript 导出函数:

scope.exportToPNG2 = function () {

  var svg = document.querySelector('#wordCloudSVG');

  var canvas = document.getElementById('WordCloudCanvas');

  var ctx = canvas.getContext('2d');
  var data = (new XMLSerializer()).serializeToString(svg);
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);

      var imgURI = canvas
          .toDataURL('image/png')
          .replace('image/png', 'image/octet-stream');

      triggerDownload(imgURI);
  };

  img.src = url;
}


function triggerDownload(imgURI) {
  var evt = new MouseEvent('click', {
      view: window,
      bubbles: false,
      cancelable: true
  });

  var a = document.createElement('a');
  a.setAttribute('download', 'MY_COOL_IMAGE.png');
  a.setAttribute('href', imgURI);
  a.setAttribute('target', '_blank');

  a.dispatchEvent(evt);
}

这是渲染我的词云的模板:

<div id="wordCloud">
    <button class="basicButton" ng-click="exportToPNG2()">Export to .PNG</button>
    <div id="wordCloudVisualisation"></div>
    <canvas id="WordCloudCanvas"></canvas>
</div>

这张图片显示了我的<div>我的词云被渲染到的地方。黄色突出显示的 block 是词云的一部分，被重新绘制为 png 并导出:

var svg = document.querySelector('#wordCloudSVG'); 中的元素 ID我在 Chrome 开发工具中得到了这样的结果:

我必须更改什么才能导出整个词云？

Answer 1

由于这篇文章，我对导出功能做了一些细微的更改:https://gist.github.com/gustavohenke/9073132

我根据svg.getBoundingClientRect()设置 Canvas 大小

这是我的工作解决方案(请参阅代码中的注释):

scope.exportToPNG2 = function () {

  var svg = document.querySelector('#wordCloudSVG');

  //create a canvas
  var canvas = document.createElement("canvas");

  //set size for the canvas
  var svgSize = svg.getBoundingClientRect();
  canvas.width = svgSize.width;
  canvas.height = svgSize.height;

  var ctx = canvas.getContext('2d');

  var data = new XMLSerializer().serializeToString(svg);

  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);

      var imgURI = canvas
          .toDataURL('image/png')
          .replace('image/png', 'image/octet-stream');

      triggerDownload(imgURI);
  };

  img.src = url;
}