Description
CDN Search
75CDN jsDelivr
<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta charset="utf-8" />
	<title>NetnrRun</title>
	<script src="https://lib.baomitu.com/canvg/1.5/canvg.min.js"></script>
</head>

<body>    
    <input type="button" value="svg转为canvas" onClick="change()" />
    <input type="button" value="canvas存储图片" onClick="saveimg()" />
    <select id="seimgtype">
        <option>png</option>
        <option>jpeg</option>
    </select>
	<div id="container">
		<!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="130px" height="130px" viewBox="-0.5 -0.5 130 130"><defs/><g><ellipse cx="65" cy="65" rx="49" ry="49" fill="#ffffff" stroke="#000000" stroke-width="2" pointer-events="none"/><path d="M 27 70 C 27 84.91 44.01 97 65 97 C 85.99 97 103 84.91 103 70" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 32 67 L 22 73" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 98 67 L 108 73" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><ellipse cx="43" cy="51" rx="3" ry="8" fill="#ffffff" stroke="#000000" stroke-width="6" pointer-events="none"/><ellipse cx="87" cy="51" rx="3" ry="8" fill="#ffffff" stroke="#000000" stroke-width="6" pointer-events="none"/></g></svg> -->
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="130px" height="242px" viewBox="-0.5 -0.5 130 242"><defs/><g><ellipse cx="65" cy="65" rx="49" ry="49" fill="#ffffff" stroke="#000000" stroke-width="2" pointer-events="none"/><path d="M 27 70 C 27 84.91 44.01 97 65 97 C 85.99 97 103 84.91 103 70" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 32 67 L 22 73" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 98 67 L 108 73" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><ellipse cx="43" cy="51" rx="3" ry="8" fill="#ffffff" stroke="#000000" stroke-width="6" pointer-events="none"/><ellipse cx="87" cy="51" rx="3" ry="8" fill="#ffffff" stroke="#000000" stroke-width="6" pointer-events="none"/><image x="24.5" y="145.5" width="80" height="80" xlink:href="https://www.netnr.com/favicon.ico" pointer-events="none"/></g></svg>		
	</div>	
	<canvas id="canvasId"></canvas>
</body>

</html>
function change() {
    var ct = document.getElementById("container");
    var svgnode = ct.children[0];
    var cvs = document.getElementById("canvasId");
    cvs.width = svgnode.clientWidth;
    cvs.height = svgnode.clientHeight;

    var gc = cvs.getContext("2d");
    //填充白色背景
    var ext = document.getElementById("seimgtype").value;
    if (ext == "jpeg") {
        gc.fillStyle = "#fff";
        gc.fillRect(0, 0, cvs.width, cvs.height);
    }

    gc.drawSvg(ct.innerHTML.trim());
}

function saveimg() {
    var ext = document.getElementById("seimgtype").value;
    var cvs = document.getElementById("canvasId");
    var url = cvs.toDataURL("image/" + ext);

    var vimg = new Image();
    vimg.src = url;
    document.body.appendChild(vimg);

    down(url, 'img.' + ext)
}

function down(url, name) {
    var oA = document.createElement("a");
    oA.download = name;
    oA.href = url;
    document.body.appendChild(oA);
    oA.click();
    oA.remove();
}