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

【问题标题】：HTML5 CANVAS: How to save and reopen image from serverHTML5 CANVAS：如何从服务器保存和重新打开图像
【发布时间】：2011-07-31 02:07:33
【问题描述】：

我用 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()，还是不行。

你能帮忙吗？谢谢！

【问题讨论】：

图片是否与 Canvas 托管在同一个域中？如果不是，则会抛出 SECURITY_ERR 异常，因为 origin-clean 标志将设置为 false。
为什么在php fopen中有一个文本文件？

标签： php javascript html file canvas

【解决方案1】：

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

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

【讨论】：

【解决方案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)));

【讨论】：