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"); 

Даст вам что-то вроде этого:

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

Как сказал @Variant, вам нужно base64_decode, но, игнорируя "image / png; base64,"

Это должно работать:

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