svg到png下载php

Question

I have a web page with a few graphics. 我有一个带有一些图形的网页。 The graphics have been built using the Google Chart API. 图形是使用Google Chart API构建的。 The graphics are in SVG and I wanted a button, when I click on it, generate a PNG image and opened the window with the "Save As" (to save the image). 图形在SVG中，我想要一个按钮，当我单击它时，生成一个PNG图像，并打开带有“另存为”的窗口（以保存图像）。 I dont understand why this doesn't work :( 我不明白为什么这不起作用:(

HTML File HTML文件

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="rgbcolor.js"></script> 
    <script type="text/javascript" src="canvg.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Work',    11],
                ['Eat',      2],
                ['Commute',  2],
                ['Watch TV', 2],
                ['Sleep',    7],
                ['teste 1',  5],
                ['teste 2',  3],
                ['teste 3',  8],
                ['teste 4',  4],
                ['teste 5',  7]
            ]);

            var options = {
                title: 'My Daily Activities'
            };

            var chart = new google.visualization.PieChart(document.getElementById('svg'));
            chart.draw(data, options);
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#converter').click(function (event){

                var canvas = document.getElementById("canvas");
                    var svg = $("#svg :last-child").html().replace(/>\s+/g, ">").replace(/\s+</g, "<").replace(" xlink=", " xmlns:xlink=").replace(/\shref=/g, " xlink:href=");
                    canvg(canvas, svg);

                var data = canvas.toDataURL("image/png");
                $('#imagem').attr('src', data);
                $('#canvas').remove();



                // Send the screenshot to PHP to save it on the server
                var url = 'export.php';
                $.ajax({
                    type: "POST", 
                    url: url,
                    dataType: 'text',
                    data: {
                        base64data : data
                    }
                });

            });
        });
    </script>

</head>

<body>

    <h1>Convert SVG in to PNG Imagem (Javascript)</h1>

    <div id="apresentacao">
        <div class="esquerda">
            <h2>SVG</h2>
            <div id="svg">

            </div>
        </div>

        <div class="botao">
            <input type="button" id="converter" value="Converter" />
        </div>

        <div class="direita">
            <h2>PNG</h2>
            <div class="fundo">
                <canvas id="canvas" width="200px" height="200px"></canvas>
                <img id="imagem"/>
            </div>
        </div>

    </div>
</body>

PHP File PHP文件

# we are a PNG image
header('Content-type: image/png');

# we are an attachment (eg download), and we have a name
header('Content-Disposition: attachment; filename="imagem.png"');

#capture, replace any spaces w/ plusses, and decode
$encoded = $_POST['base64data'];
$encoded = str_replace(' ', '+', $encoded);
$decoded = base64_decode($encoded);

#write decoded data
echo $decoded;

Answer 1

This question was already asked on stackoverflow. 已经在stackoverflow上询问了此问题。 Quick search on google reveals the following: https://stackoverflow.com/a/13824542/2332336 在Google上进行的快速搜索显示以下内容： https : //stackoverflow.com/a/13824542/2332336

On the PHP file where the image data gets posted to as Base64 Encoded string, you can save it directly in the database or to a file on your server: 在将图像数据作为Base64编码字符串发布到的PHP文件上，您可以将其直接保存在数据库中或服务器上的文件中：

<?php

// Get the request
$data = $_GET['data'];

// Save image to file
$h = fopen('chart.png', 'w');
fwrite($h, base64_decode($data));
fclose($h);

?>

svg到png下载php

问题描述

1 个解决方案

解决方案1
0 2013-10-16 14:07:50

svg到png下载php

问题描述

1 个解决方案

解决方案1 0 2013-10-16 14:07:50

解决方案1
0 2013-10-16 14:07:50