HTML5 CANVAS：如何從服務器保存並重新打開圖像

Question

我用html5-canvas畫東西。 然后我想保存它，當再次加載頁面時，我想將保存的圖像重新加載到畫布上。 我成功地將數據保存到服務器中的文件中，但是由於某種原因，這是一個奇怪的文件，無法通過ant軟件打開，當然也不能通過我的畫布打開。 我將其另存為png base64，但是嘗試了其他無效的方法。

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() ，但是仍然無法正常工作。

你能幫忙嗎？ 謝謝！

Answer 1

為了正確保存文件，您需要解碼base64數據（並另存為png）：

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

Answer 2

這個：

.toDataURL("image/png"); 

會給你這樣的東西：

圖像/ PNG; BASE64，iVBORw0K ... [base64encoded_string] ...

正如@Variant所說，您需要對它進行base64_decode，但忽略“ image / png; base64”，

這應該工作：

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