將畫布保存爲服務器上的svg和json

Question

我想將畫布（它具有圖像，文本，形狀等）保存到服務器上的svg。

實際上，我希望畫布以3種格式保存畫布 - png文件，svg文件和JSON文件。

這是我的畫布，PNG代碼：

的jQuery：

jQuery(document).ready(function(){ 
    jQuery('#btnSave').click(function(){ 
    var pic =document.getElementById("myCanvas").toDataURL('image/png'); 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: { 
      img: pic 
      } 
     }).done(function(o) { 
      console.log('saved'); 
     }); 
    }); 
}); 

PHP代碼（script.php的）：

if (isset($_POST['img'])) { 
    define('UPLOAD_DIR', 'uploaddesign/'); 
    $img = $_POST['img']; 
    $img = str_replace('data:image/png;base64,', '', $img); 
    $img = str_replace(' ', '+', $img); 
    $data = base64_decode($img); 
    $file = UPLOAD_DIR . uniqid() . '.png'; 
    $success = file_put_contents($file, $data); 
    print $success ? $file : 'Unable to save the file.'; 
} 

人知道如何保存在其它兩種格式的畫布，svg和json：

Answer 1

JSON是結構化數據的格式。沒有有意義的方式將圖像保存爲JSON。

對於SVG，它是矢量圖形的格式，而從畫布獲得的圖像是光柵化圖像。從光柵圖像到矢量圖像的轉換通常被認爲是一個壞主意。您可以閱讀ImageMagick庫上的tutorial。雖然庫提供了這種轉換，但它會發出警告

換句話說，來自IM的任何輸出都不會是真正的矢量格式。雖然它可以將其內部光柵格式轉換爲矢量格式文件，但結果只是光柵格式圖像周圍的表面矢量圖像包裝。除非輸出設備的柵格圖像被正確定義（以正確的分辨率），否則結果不會特別好。

不幸的是，即時消息的新用戶對此不瞭解。他們將IM視爲可將PDF轉換爲Postscript的轉換器，從而在預期的輸出設備上生成具有「塊狀」混疊效果，「洗出」顏色或模糊圖像的圖像，而這些圖像看起來不太好。

這裏所說的關於PDF到Postscript的說法對於PNG到SVG也是如此。這不是該庫的一個功能，而是所有柵格到矢量轉換的基本問題。

也就是說，將png圖像轉換爲svg圖像的「最佳」方式是所提及的「膚淺的矢量圖像包裝器」。這意味着，您可以定義一個svg圖像來顯示PNG圖像，就像HTML頁面顯示的圖像一樣，定義爲數據url。 SVG是一種XML文件格式，可以像這樣在PHP中構建：

// $_POST validation 

$str = <<<XML 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    width="$_POST['width']" 
    height="$_POST['height']"> 
    <image xlink:href="$_POST['img']" 
      width="$_POST['width']" 
      height="$_POST['height']"> 
</svg> 
XML; 

$svg = new DOMDocument('1.0', 'UTF-8'); 
$svg->xmlStandalone = false; 
$svg->loadXML($str); 

$file = UPLOAD_DIR . uniqid() . '.svg'; 
file_put_contents($file, $svg->saveXML()); 

數據url字符串必須被複制到svg文件中。寬度和高度的值必須用畫布的大小替換。你必須傳遞他們在您的POST請求：

jQuery(document).ready(function(){ 
    jQuery('#btnSave').click(function(){ 
     var pic = document.getElementById("myCanvas"); 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: { 
       img: pic.toDataURL('image/png'), 
       width: pic.width 
       height: pic.height 
      } 
     }).done(function(o) { 
      console.log('saved'); 
     }); 
    }); 
});