svg转成png并下载

要实现点击一个按钮，将界面上相应的svg转成png图片并下载。

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" id="svg_vis" 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 WORLD!</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="svgToPng.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));

总的思路就是将svg先转为canvas，然后在转为png下载。具体的步骤原理我也不清楚，借鉴别人代码改来的O(∩_∩)O哈哈~。

注意：svg元素要用一个标记套着，不然不会执行下载

等会在做一个html转png。。。。。。

猜你喜欢