Question

我用html5-canvas绘制一些东西。然后我想保存它，当再次加载页面时，我想加载我保存回画布的图像。我成功将数据保存到服务器中的文件中，但由于某种原因，它是一个奇怪的文件，无法通过蚂蚁软件打开，而且不是我的画布。我将它保存为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)));

HTML5 CANVAS：如何从服务器保存和重新打开图像

2 个答案: