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> 我的词云被渲染到的地方。黄色突出显示的块是词云中被重新绘制为 png 并导出的部分：

var svg = document.querySelector('#wordCloudSVG'); 中的元素 id 我在我的 Chrome 开发工具中得到了这个：

我必须改变什么来导出整个词云？

Answer 1

感谢这篇文章，我对导出功能做了一些小改动：https://gist.github.com/gustavohenke/9073132

我正在根据svg.getBoundingClientRect() 设置画布大小

这是我的工作解决方案（参见代码中的 cmets）：

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;
}

Answer 2

您需要将您的画布width 和height 属性设置为您的svg 图像的natural..。

img.onload = function () {
    canvas.width = this.naturalWidth;
    canvas.heigh = this.naturalHeight;
    ctx.drawImage(this, 0,0);
    ...

但是请注意，当 img 指向 svg 文档时，IE 不会设置它们的宽度/高度，因此您必须从文档的元素中解析它。由于在这里您将 svg 的 width 和 height 属性设置为默认像素，因此您可以轻松获得它。
（但请注意，无论如何使用这种方法你会遇到更多的 IE 问题......）