Question

我正在尝试从我的网站导出一个复杂的SVG块（用c3生成）作为图像（无论是png，svg，pdf，此时我对任何可以解决它的问题持开放态度，尽管矢量格式会是理想的）。我曾尝试过html2canvas，canvg，jsPDF以及该团伙的所有酷孩子。问题是：我的一个情节搞砸了。线变成了区域，区域被反转，颜色被破坏了......你说出来了。

我相当远成为js专家。我刚来到这里，我找到了解决办法，有些人请耐心等待。

我不知道这是一个CSS问题还是什么问题。是的，我们确实在html背后有CSS。

我的临时解决方案是使用jQuery.print.js来调用我的div的打印。由于很多原因，这远非理想：

没有bbox。它生成的PDF页面大小由用户定义，而不是图像大小;
我正在使用自动调整大小的自举卡。每当按下“打印图像”时，打印使用当前的尺寸。我已经尝试隐藏卡片来重新缩放目标，但调整大小只会在打印电话之后进行，原因我不知道。这个问题已经解决了，这个临时解决方案会更好，尽管还是一个临时解决方案。

所以，有一个问题是：

如何显示SVG？
或者，如何在调用打印之前调整卡的大小？
或者，如何在没有从canvg / jsPDF获取格式错误的情况下生成栅格（png / jpeg）？

现在进行打印调用的功能是：

function getscreenshot(div) {
  // Hide row pair:
  $('#map-card').addClass('hidden');

  // Temporarily change class attr to spawn all row:
  var divClass = $(div).attr('class');
  $(div).attr('class', 'col');

  // ****PROBLEM****
  // Div size is not upated before calling print()
  // causing the print to have the size as displayed on user screen
  // How to refresh it before print?
  // ********

  // jQuery.print solves it in a non-ideal way, since user has to set save as file and so on
  $(div).print();

  // This solution with jsPDF produces **ugly as hell** image:
  // var pdf = new jsPDF('landscape');
  // pdf.addHTML(document.getElementById(div), function() {
  //     pdf.save(name + 'pdf');
  // });

  // Recover original size after print:
  // Restore row pair and div original state:
  $('#map-card').removeClass('hidden');
  $(div).attr('class', divClass);
}

以下是网页上显示的一排卡片：

右边的情节是我正在关注我的试验，以及正在完成未格式化的情节。使用canvg.js检查使用html2canvas，jsPDF等产生的结果与fiddle with SVG pasted中出现的相同误解

PS：是的，我确实搜索了很多。这就是我最终尝试html2canvas，canvg，jsPDF，jqprint，......

干杯！

Answer 1

你可以用迈克博斯托克（或者也许是纽约时报）SVG Crowbar解决问题。使用SVG Crowbar 2.将其拖动到书签栏，然后在要保存SVG的页面上单击它。如果有多个SVG，则必须选择哪一个。

我用c3.js测试了SVG Crowbar 1并且它没有正确保存样式，因此请确保使用SVG Crowbar 2.我使用c3.js测试了SVG Crowbar 2并且它对我有效。

拥有SVG后，您可以使用Inkscape从中创建PNG。点击：文件＆gt;导出PNG图像。然后选择所需的尺寸进行输出。然后单击“导出” This网站已逐步说明如何执行此操作

网上也有网站将SVG转换为PNG，但也有一些，所以我不会发布链接。谷歌搜索应该找到你需要的东西。

如果你想以程序化方式完成所有这些，那就是另一个故事。

更新：SVG Crowbar（1和2）仅适用于Chrome。

Answer 2

最终结果使用@tgiachetti回答，并进行了一些调整。最初的svg-crowbar-2的问题在于它是一本小册子并为网站上的所有SVG打开了下载按钮，这不是理想的最终结果，只适用于Chrome。

此处提供的解决方案适用于Chrome和Firefox。

所以我最终对来自https://github.com/NYTimes/svg-crowbar的svg-crowbar-2.js进行了一些修改：

用作功能，而不是小册子;
仅循环至第4个SVG源，因为其余的不需要;
接收单个图表下载的SVG序列号;
下载后重新加载页面。

更改可以在以下位置找到：js file singledownload-svg-crowbar-2.js：https://github.com/FluVigilanciaBR/fludashboard/blob/development/fludashboard/static/libs/svg-crowbar-2/singledownload-svg-crowbar-2.js

用法：

首先，插入调整的svg-crowbar-2作为来源：

<script src="./static/libs/svg-crowbar-2/singledownload-svg-crowbar-2.js"></script>

然后，在每张情节卡片上，我插入一个按钮，调用函数getscreenshot，传递所需SVG的序列号：

<div class="container">
 <button type="button" class="btn btn-link btn-sm no-print" onclick="getscreenshot(3);">Salvar imagem</button>
</div>

此函数放在index.html本身，基本上根据绘图序列号定义SVG文件名，并调用单个SVG下载器函数singleSVGcrowbar，在singledownload-svg-crowbar-2.js上定义：

<script language="JavaScript" type="text/javascript">
  function getscreenshot(myplot) {
    var plotName = ['mapa', 'mapa-legenda', 'serie-temporal', 'distribuicao-etaria'];
    var myplotObj = {SVGid: myplot, SVGname: plotName[myplot]};

    singleSVGcrowbar(myplotObj);
  }
</script>

如果要在自己的网站上插入此内容，首先要通过运行原始的svg-crowbar-2来识别所需SVG块的序列号。这是在getscreenshot（myplot）调用中插入的数字。

如何从复杂的svg正确生成画布

2 个答案: