svg 转图片 base64

最新推荐文章于 2024-04-01 08:52:42 发布

qq_21046869

最新推荐文章于 2024-04-01 08:52:42 发布

阅读量597

点赞数 10

文章标签： es6 javascript

本文链接：https://blog.csdn.net/qq_21046869/article/details/135017486

版权

思路就是把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>