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

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

这是网页上显示的一排卡片:

右边的情节是我正在关注我的试验,以及正在完成未编辑的那个.检查出来的东西用html2canvas,jsPDF并在同误会为类似结果似乎在与SVG小提琴粘贴,使用canvg.js

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

干杯!

Answer 1

最终结果利用了@tgiachetti 的答案，并进行了一些调整。原始 svg-crowbar-2 的问题在于它是一本小册子，并为网站上的所有 SVG 打开了下载按钮，这不是期望的最终结果，并且仅适用于 Chrome。

这里介绍的解决方案适用于 Chrome 和 Firefox。

因此，我最终对https://github.com/NYTimes/svg-crowbar的 svg-crowbar-2.js 进行了一些修改：

• 用作函数，而不是小册子；
• 仅循环至第 4 个 SVG 源，因为不需要其余的源；
• 接收 SVG 序列号以进行单图下载；
• 下载后重新加载页面。

可以在 js 文件 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文件名，并调用在singledownload-svg-crowbar-2.js上定义的单个SVG下载器函数singleSVGcrowbar：

<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) 调用中插入的数字。