HTML5 CANVAS：如何保存并从服务器重新打开图像 [英] HTML5 CANVAS: How to save and reopen image from server

问题描述

我用html5画布绘制东西。然后我想保存它，当页面被再次加载，我想加载我保存回到画布的图像。我成功地将数据保存到服务器中的文件，但由于某种原因，它是一个奇怪的文件，无法打开的蚂蚁软件，而不是我的画布。我把它保存为png base64，但我尝试了其他无法工作的东西。

I draw something with html5-canvas. then i want to save it, and when the page is loaded again, I want to load the image I saved back to the canvas. I succeed with saving the data into a file in the server, but for some reason it's a strange file that can't open by ant software, and ofcourse not by my canvas. I save it as png base64, but i tried other things that didn't work.

javascript代码：

javascript code:

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（），但它仍然无法工作。

it creates the file, but shows nothing on the canvas when I load the page again. I also tried to use Canvas2Image.saveAsPNG(), but it still didn't work.

你能帮忙吗？
感谢！

can you please help? thanks!

推荐答案

为了正确保存文件，您需要解码base64数据）：

In order to save the file properly you need to decode the base64 data (and save as png):

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

这篇关于HTML5 CANVAS：如何保存并从服务器重新打开图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！