思路就是 把SVG 转成 DOM文档序列化为XML字符串 , 在用 canvas 渲染图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>svg转png</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,238,200" id="svg" width="476" height="422">
<defs>
<pattern id="raduisImage" patternUnits="objectBoundingBox" width="32" height="32">
<image xlink:href="https://profile.csdnimg.cn/E/6/D/3_web_xiaolei" x="0" y="0" width="32" height="32" />
</pattern>
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(3,0,21);stop-opacity:1"/>
<stop offset="60%" style="stop-color:rgb(30,12,109);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(5,1,26);stop-opacity:1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="238" height="120" style="fill:url(#linearGradient)"/>
<rect width="226" height="96" x="5" y="14" style="fill:white;stroke-width:0;opacity:0.1;" />
<text x="16" y="35" style="font-size:11;fill:white;font-weight:600;">svg转 base64串 图片</text>
<line x1="12" y1="50" x2="225" y2="50" style="stroke:#AFABBF;stroke-width:1"/>
<circle cx="32" cy="76" r="16" fill="url(#raduisImage)"></circle>
<text x="53" y="70" style="font-size:10;fill:white;">web_xiaolei</text>
<text x="53" y="82" style="font-size:8;fill:white;">程序虐我千百遍,我待程序如初恋</text>
</svg>
<img src="" id="imgBase64" alt="" >
<script type="text/javascript">
var serializer = new XMLSerializer();
var svg = document.getElementById('svg');
var source = serializer.serializeToString(svg);
source = '<?xml version = "1.0" standalone = "no"?>\r\n' + source;
var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
document.getElementById('imgBase64').setAttribute('src',url);
// const img = new Image()
// img.src = url
// img.onload = function () {
// const canvas = document.createElement('canvas')
// canvas.width = img.width
// canvas.height = img.height
// const ctx = canvas.getContext('2d')
// ctx.drawImage(img, 0, 0)
// const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
// const dataURL = canvas.toDataURL('image/' + ext)
// console.log(dataURL)
// }
let xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (this.status == 200) {
let blob = this.response
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
const base64 = e.target.result;
console.log(1221)
console.log(base64)
}
oFileReader.readAsDataURL(blob)
}
}
xhr.send()
</script>
</body>
</html>