svg画布里面的内容转化成png图片，并下载到本地

最新推荐文章于 2024-08-28 08:12:55 发布

IT博客技术分享

最新推荐文章于 2024-08-28 08:12:55 发布

阅读量2.2k

点赞数

分类专栏： SVG 文章标签： svg画布里面的内容转化成png图片，并下载到本地

本文链接：https://blog.csdn.net/qq_41646249/article/details/102657442

版权

SVG 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先上效果图哈：

具体代码如下：

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 500px; height: 250px; border: 2px solid #ddd">
    <svg id="my-svg" pointer-events="none" width="500px" height="250px" style="position: absolute;">
        <g id="bubbleChart">
            <g class="bubbleElement" transform="translate(200,125)">
                <circle pointer-events="all" class="bubbleCircle bubbleEvents" fill="rgb(14, 191, 233)" stroke-width="2" stroke="#0985a3" stroke-opacity="1" id="bubble_724" style="" r="80" opacity="1"></circle>

                <text pointer-events="none" text-anchor="middle" dy="-0.5em" class="bubbleText" style="font-family : 'DINMittelEF-Bold', Georgia, serif; font-weight : bold; font-size : 18px; fill : #000" opacity="1">HELLO! HELLO!</text>
                <text pointer-events="none" text-anchor="middle" dy="1em" class="bubbleText" style="font-family : 'DINMittelEF-Bold', Georgia, serif; font-weight : bold; font-size : 18px; fill : #000" opacity="1">SVG!</text>
            </g>
        </g>
    </svg>
</div>
<button onclick="change()">change</button>
<script src="test.js"></script>
<script>
    var svg = document.querySelector('svg');
    var svgToPng = new svgToPng(svg);
    function change() {
        svgToPng.change('zhang');
    }
</script>
</body>
</html>

js：

(function (global) {
    global.svgToPng = function (svgHtml) {
        this.svgHtml = svgHtml;
    };
    global.svgToPng.prototype = {
        change:function (filename) {
            var This = this;
            [
                ['version', 1.1],
                ['xmlns', "http://www.w3.org/2000/svg"],
            ].forEach(function(item){
                This.svgHtml.setAttribute(item[0], item[1]);
            });
            var str = This.svgHtml.parentNode.innerHTML;
 
            //2.生成img
            var img = document.createElement('img');
 
            img.onload = function(){
                //3生成canvas
                var canvas = document.createElement('canvas');
                var context = canvas.getContext("2d");
 
                canvas.width = img.width;
                canvas.height = img.height;
 
                context.drawImage(img, 0, 0);
 
                var canvasData = canvas.toDataURL("image/png");
                var img2 = document.createElement('img');
                img2.onload = function () {
                    console.log('change2');
                    var a = document.createElement("a");
                    a.download = filename + ".png";
                    a.href = img2.getAttribute('src');
                    a.click();
                };
                // Make pngImg's source the canvas data.
                img2.setAttribute('src', canvasData);
            };
 
            // Make the new img's source an SVG image.
            img.setAttribute('src', 'data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(str))));
        }
    }
}(this));