svg to png 다운로더 PHP

몇 개의 그래픽이있는 웹 페이지가 있습니다. 그래픽은 Google Chart API를 사용하여 작성되었습니다. 그래픽이 SVG에 있고 버튼을 원했을 때 클릭했을 때 PNG 이미지가 생성되고 "다른 이름으로 저장"(이미지 저장) 창이 열렸습니다. 나는이 작동하지 않는 이유 :(이해 해달라고svg to png 다운로더 PHP

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 파일

# 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;

출처

2013-10-16 Ricardo Rio

공백을 바꾸는 목적은 무엇입니까? 유효한 base64 문자열에는 공백이 포함되지 않습니다. 의 –

중복 가능성 [이미지로 구글 차트를 저장] (http://stackoverflow.com/questions/13824096/save-google-charts-as-a-image) –

http://chartstoimage.eu/ 나는 이것이 믿는다 당신이 찾고있는 것 : – paranoid

이 질문에 이미 유래에 요청했다 구글의 빠른 검색은 다음을 알 수있다. : 이미지 데이터를 Base64로 인코딩으로 문자열에 게시됩니다 PHP 파일에

https://stackoverflow.com/a/13824542/2332336, 당신은 databa에 직접 저장할 수 있습니다 se 또는 서버의 파일로 복사하십시오.

<?php 

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

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

?>

출처

2013-10-16 14:07:50 Latheesan

그리고 서버에 이미지를 저장해야합니까? 내가 필요한 것은 클라이언트 측 (브라우저)에서 다운로드하는 것입니다. –

svg to png 다운로더 PHP

답변

관련 문제