SVG文件转PNG文件输出

使用前先获取想要的svg图标：https://www.bootstrapmb.com/icon

使用地址：https://mp.liuliu.fit/svgToPng/stand.html

实现代码

标准版

优点：能够根据svg原配色进行转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG to PNG Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .container {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        input[type="file"] {
            margin-bottom: 10px;
        }
        canvas {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>SVG to PNG Converter</h1>
    <input type="file" id="svgFile" accept=".svg">
    <input type="number" id="width" placeholder="Width (px)" min="1">
    <input type="number" id="height" placeholder="Height (px)" min="1">
    <input type="text" id="fileName" placeholder="fileName" min="1" max="64" style="margin-right: 10px">
    <button onclick="convertSVGToPNG()" style="background-color: #9ddaff">转换</button>
    <canvas id="canvas"></canvas>
    <div id="result"></div>
    <div>
        <a href="svgToPngPro.html">去增强版</a>
    </div>
</div>

<script>
    function convertSVGToPNG() {
        const fileInput = document.getElementById('svgFile');
        const widthInput = document.getElementById('width');
        const heightInput = document.getElementById('height');
        const fileNameInput = document.getElementById('fileName');
        const resultDiv = document.getElementById('result');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        const file = fileInput.files[0];
        const width = parseInt(widthInput.value);
        const height = parseInt(heightInput.value);
        const fileName = fileNameInput.value;


        if (!file || !width || !height) {
            alert('Please select an SVG file and specify both width and height.');
            return;
        }

        const reader = new FileReader();
        reader.onload = function(event) {
            const svgData = event.target.result;
            const img = new Image();
            const svgBlob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
            const url = URL.createObjectURL(svgBlob);

            img.onload = function() {
                canvas.width = width;
                canvas.height = height;
                ctx.clearRect(0, 0, width, height);
                ctx.drawImage(img, 0, 0, width, height);
                URL.revokeObjectURL(url);

                canvas.toBlob(function(blob) {
                    const url = URL.createObjectURL(blob);
                    const imgElement = document.createElement('img');
                    imgElement.src = url;
                    imgElement.style.marginTop = '10px';
                    resultDiv.innerHTML = '';
                    resultDiv.appendChild(imgElement);

                    const downloadLink = document.createElement('a');
                    downloadLink.href = url;
                    downloadLink.download = fileName+'.png';
                    downloadLink.textContent = 'Download PNG';
                    downloadLink.style.display = 'block';
                    downloadLink.style.marginTop = '10px';
                    resultDiv.appendChild(downloadLink);
                }, 'image/png');
            };

            img.src = url;
        };

        reader.readAsText(file);
    }
</script>
</body>
</html>

增强版

优点：能够替换svg颜色（无颜色搭配）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG to PNG Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .container {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        input[type="file"] {
            margin-bottom: 10px;
        }
        canvas {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>SVG to PNG Converter Pro</h1>
    <input type="file" id="svgFile" accept=".svg">
    <input type="number" id="width" placeholder="Width (px)" min="1">
    <input type="number" id="height" placeholder="Height (px)" min="1">
    <input type="text" id="fileName" placeholder="fileName" min="1" max="64">
    <input type="color" id="color" value="#000000" style="margin-right: 10px">
    <button onclick="convertSVGToPNG()" style="background-color: #9ddaff">转换</button>
    <canvas id="canvas"></canvas>
    <div id="result"></div>
    <div>
        <a href="svgToPng.html">去标准版</a>
    </div>
</div>

<script>
    function convertSVGToPNG() {
        const fileInput = document.getElementById('svgFile');
        const widthInput = document.getElementById('width');
        const heightInput = document.getElementById('height');
        const colorInput = document.getElementById('color');
        const fileNameInput = document.getElementById('fileName');
        const resultDiv = document.getElementById('result');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        const file = fileInput.files[0];
        const width = parseInt(widthInput.value);
        const height = parseInt(heightInput.value);
        const color = colorInput.value;
        const fileName = fileNameInput.value;

        if (!file || !width || !height) {
            alert('Please select an SVG file and specify both width and height.');
            return;
        }

        const reader = new FileReader();
        reader.onload = function(event) {
            let svgData = event.target.result;

            // Replace fill and stroke colors in SVG data
            svgData = svgData.replace(/fill="[^"]*"/g, `fill="${color}"`);
            svgData = svgData.replace(/stroke="[^"]*"/g, `stroke="${color}"`);

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

            img.onload = function() {
                canvas.width = width;
                canvas.height = height;
                ctx.clearRect(0, 0, width, height);
                ctx.drawImage(img, 0, 0, width, height);
                URL.revokeObjectURL(url);

                canvas.toBlob(function(blob) {
                    const url = URL.createObjectURL(blob);
                    const imgElement = document.createElement('img');
                    imgElement.src = url;
                    imgElement.style.marginTop = '10px';
                    resultDiv.innerHTML = '';
                    resultDiv.appendChild(imgElement);

                    const downloadLink = document.createElement('a');
                    downloadLink.href = url;
                    downloadLink.download = fileName+'.png';
                    downloadLink.textContent = 'Download PNG';
                    downloadLink.style.display = 'block';
                    downloadLink.style.marginTop = '10px';
                    resultDiv.appendChild(downloadLink);
                }, 'image/png');
            };

            img.src = url;
        };

        reader.readAsText(file);
    }
</script>
</body>
</html>