javascript - 如何使用 html2canvas 从 svg 显示和保存图像为 jpg 或 png？

Question

我正在使用 html2canvas js 库将网页转换为 jpg/png。当我在目标 ID 中使用简单的 div 或表格并单击按钮将网页另存为图像时。有效。但是每当我在我的目标 id 中使用 svg 时，它就不起作用。它在输出中给出空白图像。

代码是:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<script type="text/javascript">
	function capture() {
		$('#target').html2canvas({
			onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
				$('#img_val').val(canvas.toDataURL("image/png"));
                //Submit the form manually
				document.getElementById("myForm").submit();
			}
		});
	}
</script>
<style type="text/css">
	#target {
		border: 1px solid #CCC;
		padding: 5px;
		margin: 5px;
	}
	h2, h3 {
		color: #003d5d;
	}
	p {
		color:#AA00BB;
	}
	#more {
		font-family: Verdana;
		color: purple;
		background-color: #d8da3d;
	}
</style>

<h2>Simple Implementation of html2canvas With JavaScript and PHP</h2>

<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
	<input type="hidden" name="img_val" id="img_val" value="" />
</form>
<table>
	<tr>
		<td colspan="2">
			<table width="100%">
				<tr>
					<td>
						<input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" />
					</td>
					<td align="right">
						<a href="http://www.kubilayerdogan.net?p=304" style="font-family: Tahoma; font-size: 10pt; font-weight: bold;">
                            Documentation (Back to Site)</a>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td valign="top" style="padding: 10px;">
            <b>Div:</b>
		</td>
		<td>
			<div id="target">
				<div class="slides2" id="widget">
    				<img class="" src="//cdn.shopify.com/s/files/1/0797/1743/products/HK-CK_28785899-10b3-4f49-88be-975a69089e52_1024x1024.JPG?v=1464803870" style="width: 38%;">
  					<div class="custom" style="position: relative; top: -282px; left: 100px;">
             			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="410" height="70" viewBox="0 0 2326 460" id="svg"> 
              				<defs>  
                				<clipPath id="my-path">
                  					<text id="texty" style="font-weight:bold;" x="60" y="300" font-size="350">sdasa</text>
                				</clipPath>
              				</defs>
              				<image xlink:href="Mother of Pearl.JPG" clip-path="url(#my-path)" width="100%" height="100%" id="filler" preserveAspectRatio="none"></image>
          				</svg>
    				</div>
  				</div>
			</div>
		</td>
	</tr>
</table>

我想要如下图所示的输出..请帮我解决这个问题..提前谢谢 image

Answer 1

我用过这个.. DOMtoImage非常适合我。

只需将 js 链接添加到 html 并运行此脚本；

var node = document.getElementById('element_id');

	domtoimage.toPng(node).then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
		$("element_destiny").html('<img src="' + img.src + '" id="image_id" />');
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });