如何使用Javascript 和 html canvas 将内联 SVG 保存为 PNG

最新推荐文章于 2024-09-29 16:38:58 发布

原创最新推荐文章于 2024-09-29 16:38:58 发布 · 671 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #开发语言

本文介绍了一种将SVG矢量图形转换为PNG位图的方法，并提供了一个简单的网页示例，通过点击按钮实现SVG到PNG的即时转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

        <title>SVG code to .png image</title>

        <link rel="stylesheet" href="screen.css" media="screen">

        <style media="screen">
            body {
                background-color: #f0f0f0;
                font: 1em/150% verdana, arial, helvetica, sans-serif;
                text-align: center;
            }

            #container {
                display: inline-block;
                padding: 2em;
                border: 0.062em solid #999;
                border-radius: 1em;
                background-color: #fff;
                box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ), 
                    0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
            }

            h1,h2 {
                font-size: 1em;
            }

            svg, canvas {
                display:block;
                margin: 1em 0;
            }

            .hide {
                display: none;
            }
        </style>

    </head>
    <body> 

        <div id="container">

            <h1>this is the svg image</h1>

            <svg viewBox="0 0 1226 1481"  width="64" height="64">
            <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
            </svg>

            <button>svg to png</button>

            <h2 class="hide">this is the png image</h2>

            <canvas width="64" height="64"></canvas>

        </div>

        <script>

            'use strict';

            var btn = document.querySelector('button');
            var svg = document.querySelector('svg');
            var canvas = document.querySelector('canvas');

            var imageName = 'your-image-name';

            function triggerDownload(imgURI) {
                var evt = new MouseEvent('click', {
                    view: window,
                    bubbles: false,
                    cancelable: true
                });

                var a = document.createElement('a');
                a.setAttribute('download', imageName + '.png');
                a.setAttribute('href', imgURI);
                a.setAttribute('target', 'blank');
                a.dispatchEvent(evt);
            }

            btn.addEventListener('click', function () {

                var ctx = canvas.getContext('2d');
                var data = (new XMLSerializer()).serializeToString(svg);
                var DOMURL = window.URL || window.webkitURL || window;

                var img = new Image();
                var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
                var url = DOMURL.createObjectURL(svgBlob);

                img.onload = function () {
                    ctx.drawImage(img, 0, 0);
                    DOMURL.revokeObjectURL(url);

                    var imgURI = canvas
                            .toDataURL('image/png')
                            .replace('image/png', 'image/octet-stream');

                    triggerDownload(imgURI);
                };
                img.src = url;
                document.querySelector('h2').classList.remove('hide');
            });

        </script>

    </body>
</html>