0

我目前正在尝试在网站上创建一个“屏幕截图”。为此,我使用html2canvas。问题是 html2canvas svg 图像不会在生成的画布中呈现。作为一种解决方法,我目前正在尝试使用canvg在创建屏幕截图之前从 svg 创建一个画布。

现在我面临的问题是,画布不是以完整的宽度和高度创建的,而是在 mousemove 上增长,即使没有 mousemove 侦听器或任何存在的东西。

我的问题是如何在不增长的情况下获得原始 svg 大小的画布?

这个问题应该可以在这个片段中重现:

canvg(document.getElementById('canvas'), new XMLSerializer().serializeToString($('svg').get(0)));

$('svg').fadeOut();
<script src="https://canvg.github.io/canvg/canvg.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
<svg id="edgesSVG" class="edgeLayer" style="overflow: hidden; box-sizing: border-box; height: 100%; display: block; width: 100%; position: absolute; top: 0px; left: 0px; pointer-events: none;"><defs style="box-sizing: border-box;"><line x1="382.515625" x2="74.90625" y1="333.234375" y2="67.90625" id="029ed6b6-35b7-c6cc-cb6d-6b0877616f15-line" style="stroke-linecap: round; box-sizing: border-box;"></line></defs><g id="029ed6b6-35b7-c6cc-cb6d-6b0877616f15-linegroup" tabindex="0" class="edge" style="box-sizing: border-box; position: absolute; stroke-width: 8px; pointer-events: auto;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#029ed6b6-35b7-c6cc-cb6d-6b0877616f15-line" class="outer" style="box-sizing: border-box; stroke: black;"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#029ed6b6-35b7-c6cc-cb6d-6b0877616f15-line" class="inner" style="box-sizing: border-box; stroke: red; stroke-width: 4px;"></use></g></svg>

4

0 回答 0