话不多说,直接上代码
<html>
<head>
<style>
* {
background: transparent;
margin: 0px;
padding: 0px;
}
.main-warp {
width: 1800px;
height: 1500px;
}
.download {
position: fixed;
top:10px;
width: 60px;
height: 30px;
line-height: 30px;
right: 10%;
}
</style>
<script>
function converDownload() {
var mainWarp = document.getElementById("main-warp");
var svg = document.getElementById("orig-svg");
var dd = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(mainWarp.innerHTML)));
var img = new Image();
img.src = dd;
document.getElementById("help-div").appendChild(img);
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
setTimeout(function() {
var data = canvas.toDataURL('image/png');
var a = document.createElement('a');
a.href = data; //将画布内的信息导出为png图片数据
a.download = "logo.png"; //设定下载名称
a.click(); //点击触发下载
}, 1000);
}
</script>
</head>
<body>
<button class="download" onclick="converDownload()">下载</button>
<p id="main-warp" class="main-warp">
<svg id="orig-svg">自己的svg标签内容</svg>
<p>
<div id="help-div" style="width: 100%;"></div>
</body>
</html>