HTML5CANVAS：如何保存並重新打開服務器的圖像

我用html5-canvas繪製東西。然後我想保存它，當頁面再次加載時，我想將我保存的圖像加載回畫布。我成功地將數據保存到服務器中的一個文件中，但由於某種原因，這是一個奇怪的文件，無法用ant軟件打開，而且當然不是通過我的畫布打開的。我將它保存爲png base64，但我嘗試了其他不起作用的東西。HTML5CANVAS：如何保存並重新打開服務器的圖像

javascript代碼：

function save(){  //saves the canvas into a string as a base64 png image. jsvalue is sent to the server by an html form 
     var b_canvas = document.getElementById("a"); 
     var b_context = b_canvas.getContext("2d"); 
     var img = b_canvas.toDataURL("image/png"); 
     document.classic_form.jsvalue.value = img; 

    }

  // opens the image file and displays it on the canvas 
      var canvas = document.getElementById("a"); 
    var context = canvas.getContext("2d"); 
    var img = new Image(); 
    img.src = "backpicture.png"; 
    img.onload = function() { 
      context.drawImage(img, 0, 0); 
    };

PHP代碼：

<?php 
    $str=$_POST['jsvalue']; 
    $file=fopen("backpicture.txt","w"); 
    if(isset($_POST['submit'])) 
     fwrite($file,$str); 
    fclose($file) 
?>

它創建的文件，但顯示在畫布上什麼當我再次加載頁面。我也嘗試過使用Canvas2Image.saveAsPNG()，但它仍然沒有工作。

你能幫忙嗎？謝謝！

來源

2011-04-06 Amit

託管在同一個域中的圖像帆布？如果不是，那將會拋出一個SECURITY_ERR異常，因爲origin-clean標誌將被設置爲false。 – 2011-04-06 18:42:53

爲什麼你把它作爲php fopen中的文本文件？ – 2011-04-21 02:53:26

爲了妥善保存該文件需要解碼的base64數據（並保存爲PNG）：

file_put_contents('backpicture.png', base64_decode($str));

來源

2011-06-13 12:07:35 Variant

此：

.toDataURL("image/png");

會給你這樣的事情：

image/png; base64，iVBORw0K ... [base64encoded_string] ...

正如@Variant說，你需要BASE64_DECODE，但是，忽略「圖像/ PNG; BASE64，」

這應該工作：

file_put_contents('backpicture.png',base64_decode(substr($str,22)));

來源

2012-10-04 20:28:13

HTML5CANVAS：如何保存並重新打開服務器的圖像

回答

相關問題